一侧宽度固定另一侧宽度自适应且等高列布局

最近意识到自己的 css 布局基础不太扎实，然后突发奇想给自己定个简单的题目，实现完后查阅资料，无意中找到一篇简单又很详细的 好文章。

首先题目是：

1. 左侧固定宽度，右侧自适应屏幕宽；
2. 左右两列，等高布局；
3. 左右两列要求有最小高度，例如：200px;（当内容超出 200 时，会自动以等高的方式增高）
4. 要求不用 JS 或 CSS 行为实现；

---

一、两列布局：左边固定宽度，右边自适应宽度

方法一：浮动布局

采用左侧浮动+宽度，右侧 margin-left :左侧宽度值，实现左侧固定右侧自适应的布局效果。

html

<div class="container">
    <div id="left">Left sidebar</div>
    <div id="right">Main Content</div>
</div>

CSS

*{
    margin:0;
    padding: 0;
}
.container{
    min-width: 500px;
}
#left{
    float: left;
    width:200px;
    height: 250px;
    background-color: #999;
}
#right{
    height: 250px;
    margin-left: 200px;
    background-color: #ccc;
}

效果如下：

上面这种实现方法最关键之处就是自适应宽度一栏“div#right”的“ margin-left ”值要等于固定宽度一栏的宽度值

若使用这种方法，实现右侧固定宽度，左侧自适应的话，基本一致，但DOM顺序改变，如下：

HTML

<div class="container">
    <div id="right">
        Right sidebar
    </div>
    <div id="left">
        Main Content
    </div>
</div>

CSS

*{
    margin:0;
    padding: 0;
}
.container{
    min-width: 500px;
}
#left{
    margin-right: 210px;
    height:250px;
    background-color: #999;
}
#right{
    float: right;
    width: 200px;
    height: 250px;
    background-color: #ccc;
}

方法二：浮动和负边距实现

由于上述方法实现，会导致DOM顺序与显示效果不一致，解决方案，在自适应栏（左侧栏）加一层浮动的宽度为100%的包裹层，左侧栏设置 margin-right：固定宽度栏的宽度。固定宽度栏设置浮动和宽度，并且设置 margin-left: -宽度值，如下：

HTML

<div class="leftContainer">
    <div id="left">
        Main Content
    </div>
</div>
<div id="right">
    right sidebar
</div>

CSS code

*{
   margin:0;
    padding: 0;
}
.leftContainer{
    float: left;
    width: 100%;
}
#left{
    margin-right: 220px;
    height: 250px;
    background-color: #999;
}
#right{
    float: right;
    width: 200px;
    margin-left: -100%;
    height: 250px;
    background-color: #ccc;
}

方法三：设置绝对定位。宽度固定栏设置 position：absolute+ left/right+ top + width ，自适应栏设置 margin-left/margin-right: 固定宽度栏宽度。如下

HTML

<div class="container">
    <div id="left">
        left sidebar
    </div>
    <div id="right">
        Main Content
    </div>
</div>

CSS

*{
    margin:0;
    padding: 0;
}
.container{
    min-width:400px;
}
#left{
    position: absolute;
    width: 200px;
    height: 450px;
    left: 0;
    top:0;
    background-color: #999;
}
#right{
    margin-left: 220px;
    height: 450px;
    background-color: #ccc;
}

---

二、等高布局

建议先阅读《八种创建等高列布局》，里面详细介绍了八种等高布局的方法，并附有相关代码，而且我们后面的运用中也使用了其中的方法。

---

三、最小高度

min-height:200px;
height:auto !important;
height:200px;

以上的代码轻松的帮我们实现了跨浏览器的最小高度设置问题。

---

最终实现代码如下：

方法一：

固定宽度另一侧自适应 : 使用两栏浮动并一栏设置宽度+ margin 负值
等高列布局：使用边框模仿等高列

html

<div id="container">
    <div id="wrapper">
        <div id="sidebar">Left Sidebar</div>
        <div id="main">Main Content</div>
    </div>
</div>

CSS

*{
    margin: 0;
    padding: 0;
}
#container{
    background: #ffe3a6;
}
#wrapper{
    border-left: 200px solid #d4c376;
    display: inline-block;
    vertical-align: bottom;
    position: relative;
}
#sidebar{
    float: left;
    width: 200px;
    margin-left: -200px;
    position: relative;
}
#main{
    float:left;
}
#main{
    min-height: 200px;
    height: auto !important;
    height: 200px;
}

---

方法二：

一侧固定一侧自适应：使用一侧设置浮动+宽度，另一侧设置margin
等高列布局：使用正padding和负margin对冲

html

<div id="container">
    <div id="left" class="aside">Left Sidebar</div>
    <div id="content" class="section">Main Content</div>
</div>

CSS

*{
    margin: 0;
    padding: 0;
}
#container {
    overflow: hidden;
}

#left {
    background: #ccc;
    float: left;
    width: 200px;
    margin-bottom: -99999px;
    padding-bottom: 99999px;

}

#content {
    background: #eee;
    margin-left: 200px;/*==此值等于左边栏的宽度值==*/
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}
#left,
#content {
    min-height: 200px;
    height: auto !important;
    height: 200px;
}

---

方法三：

html

<div id="container">
    <div id="content">Main Content</div>
    <div id="sidebar">Left Sidebar</div>
</div>

CSS

*{margin: 0;padding: 0;}
#container{
    background-color:#0ff;
    overflow:hidden;
    padding-left:220px; /* 宽度大小等与边栏宽度大小*/
}
* html #container{
    height:1%; /* So IE plays nice */
}
#content{
    background-color:#0ff;
    width:100%;
    border-left:220px solid #f00;/* 宽度大小等与边栏宽度大小*/
    margin-left:-220px;/* 宽度大小等与边栏宽度大小*/
    float:right;
}
#sidebar{
    background-color:#f00;
    width:220px;
    float:right;
    margin-left:-220px;/* 宽度大小等与边栏宽度大小*/
}
#content,
#sidebar {
    min-height: 200px;
    height: auto !important;
    height: 200px;
}

---

方法四：

一侧固定一侧自适应：使用一侧设置浮动+宽度，另一侧设置 margin
等高：给容器 div 使用单独的背景色

html

<div id="container2">
    <div id="container1">
            <div id="col1">Left Sidebar</div>
            <div id="col2">Main Content</div>
    </div>
</div>

CSS

*{padding: 0;margin:0;}
#container2 {
    float: left;
    width: 100%;
    background: orange;
    position: relative;
    overflow: hidden;
}
#container1 {
    float: left;
    width: 100%;
    background: green;
    position: relative;
    left: 220px;/* 宽度大小等与边栏宽度大小*/
}

#col2 {
     position: relative;
    margin-right: 220px;/* 宽度大小等与边栏宽度大小*/
}
#col1 {
    width: 220px;
    float: left;
    position: relative;
    margin-left: -220px;/* 宽度大小等与边栏宽度大小*/
}

#col1,#col2 {
    min-height: 200px;
    height: auto !important;
    height: 200px;
}

---

方法五：

一侧固定一侧自适应使用：浮动+负边距
等高列布局使用：使用正 padding 和负 margin 对冲

html

<div id="container1">
    <div id="container">
        <div id="left">Left Sidebar</div>
        <div id="content">
            <div id="contentInner">Main Content</div>
        </div>
    </div>
</div>

1. 上面所有 DEMO 中，要注意其方向性的配合，并且值要统一，如果您想尝试使用自己布局需要的宽度值，请对照相关代码环节进行修改；
2. 上面所有 DEMO 中，没有设置他们之间的间距，如果您想让他们之间有一定的间距，有两种方法可能实现，其一在上面的 DEMO 基础上修改相关参数，其二，在相应的里面加上 “div” 标签，并设置其 “padding” 值，这样更安全，不至于打破你的布局。
3. 因为我们这里有一列使用了自适应宽度，在部分浏览器下，当浏览器屏幕拉至到一定的大小时，给我们带来的感觉是自适应宽度那栏内容像是被隐藏，在你的实际项目中最好能在“body”中加上一个 “min-width” 的设置。