zoukankan html css js c++ java

布局—一侧固定宽度，一侧自适应

1.固定宽度区域浮动，自适应区域不设宽度而设margin

注意：sidebar必须在content之前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #wrap{overflow: hidden;*zoom:1;}
        #sidebar,#content{background-color: red;height: 300px;}
        #sidebar{float: right;width: 300px;}
        #content{margin-right: 310px; }
        #footter{background-color: yellow;color: red;margin-top: 10px;}
    </style>
</head>
<body>
    <div id="wrap">
        <div id="sidebar">固定宽度</div>
        <div id="content">自适应部分</div>
    </div>
    <div id="footter">底部</div>
</body>
</html>

2.固定宽度绝对定位，自适应区域使用margin

注意：此时，wrap限制不了sidebar，可以给其加固定高度；绝对定位的特性，可先重置默认样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #wrap{overflow: hidden;}
        #sidebar,#content{background-color: red;height: 100%;}
        #sidebar{width: 300px;position: absolute;right: 0;top: 0;}
        #content{margin-right: 310px; }
        #footter{background-color: yellow;color: red;margin-top: 1em;}
    </style>
</head>
<body>
    <div id="wrap">
        <div id="sidebar">固定宽度</div>
        <div id="content">自适应部分</div>
    </div>
    <div id="footter">底部</div>
</body>
</html>

3.使用浮动和margin

注意：content宽度需要重新设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #wrap{overflow: hidden;}
        #sidebar,#content{background-color: red;height: 100px;}
        #sidebar{width: 300px;float: right;}
        #content{margin-left: -310px;float: left; width: 100%;}
        #content-box{margin-left: 310px;}
        #footter{background-color: yellow;color: red;margin-top: 1em;}
    </style>
</head>
<body>
    <div id="wrap">
        <div id="content">
            <div id="content-box">
                自适应部分
            </div>
        </div>
        <div id="sidebar">固定宽度</div>
    </div>
    <div id="footter">底部</div>
</body>
</html>

4.使用display：table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #wrap{overflow: hidden;display: table;width: 100%;}
        #sidebar,#content{background-color: red;height: 100px;}
        #sidebar{width: 300px;display: table-cell;}
        #content{display: table-cell;width: 100%;}
        #footter{background-color: yellow;color: red;margin-top: 1em;}
    </style>
</head>
<body>
    <div id="wrap">
        <div id="content">
            自适应部分
        </div>
        <div id="sidebar">固定宽度</div>
    </div>
    <div id="footter">底部</div>
</body>
</html>

敢想，敢做

查看全文

相关阅读:
DMZ区
 集群(cluster)和高可用性(HA)的概念
 JS禁用右键，禁用打印，防止另存为，IE浏览器识别（转载）
window.open实现模式窗口(只弹出一个window.open)
Textarea自适应高度 JS实现，兼容IE67891011
JQ基础语法
 SQL 小笔记
 CSS样式笔记
 IE8下 Select文字垂直居中的办法
 汉字转全拼音函数优化方案(SQLServer),值得你看看

原文地址：https://www.cnblogs.com/ZL8655/p/5702490.html