Html 带页眉和页脚的两列液体布局

我的HTML页面，包含两列、页脚和页眉：

<div id="main">
   <div class="header"> </div>
   <div class="left"> </div>
   <div class="data"> </div>
   <div class="bottom"> </div>
</div>

在我的例子中，我想要具有自动宽度的左DIV和具有100%宽度的数据DIV。如图所示： 如何使用IE6支持CSS？谢谢大家!

我想这会管用的。 请检查一下，让我知道

.container {
    width: 500px;
    max-height: 500px;
    margin: 10px;
    border: 1px solid #fff;
    background-color: #ffffff;
    box-shadow: 0px 2px 7px #292929;
    -moz-box-shadow: 0px 2px 7px #292929;
    -webkit-box-shadow: 0px 2px 7px #292929;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
.mainbody,
.header,
.footer {
    padding: 5px;
}
.mainbody {
    margin-top: 0;
    min-height: 150px;
    max-height: 388px;
    overflow: auto;
}
.header {
    height: 40px;
    border-bottom: 1px solid #EEE;
    background-color: #ffffff;
    height: 40px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.footer {
    height: 40px;
    background-color: whiteSmoke;
    border-top: 1px solid #DDD;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.left{
width:50%;
float:left;
background:#bbb;
height:100%;
}
.right{
    width:50%;
    float:right;
    background:#aaa;
    height:100%;
}

<div id="container">
    <div class="header">Header</div>
    <div class="mainbody">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">Footer</div>
</div>

.container{
宽度：500px；
最大高度：500px；
利润率：10px；
边框：1px实心#fff；
背景色：#ffffff；
盒影：0px 2px 7px#292929；
-moz盒阴影：0px 2px 7px#292929；
-网络工具包盒阴影：0px 2px 7px#292929；
边界半径：10px；
-moz边界半径：10px；
-webkit边界半径：10px；
}
.主体，
.标题，
.页脚{
填充物：5px；
}
.主体{
边际上限：0；
最小高度：150px；
最大高度：388px；
溢出：自动；
}
.标题{
高度：40px；
边框底部：1px实心#EEE；
背景色：#ffffff；
高度：40px；
-webkit边框左上半径：5px；
-webkit边框右上角半径：5px；
-左上角moz边界半径：5px；
-moz边框半径右上角：5px；
边框左上半径：5px；
边框右上角半径：5px；
}
.页脚{
高度：40px；
背景色：白烟；
边框顶部：1px实心#DDD；
-webkit边框左下半径：5px；
-webkit边框右下半径：5px；
-moz边框半径左下角：5px；
-moz边框半径右下角：5px；
边框左下半径：5px；
边框右下半径：5px；
}
.左{
宽度：50%；
浮动：左；
背景:#bbb ;；
身高：100%；
}
.对{
宽度：50%；
浮动：对；
背景：#aaa；
身高：100%；
}
标题
左边
正确的
页脚

html

---

根据需要

css

保持一切与上面相同，只需在css下面更改即可

.content{
    background:#eee;
    width:100%;
    padding:10px;
    height:100%;
    box-sizing:border-box;
    padding:10px;
    display:table
}
.left{
    width:auto;
    background:#bbb;
    height:100%;
    display:table-cell
}
.right{
    background:#aaa;
    height:100%;
    display:table-cell;
    width:100%
}

---

你能发布到目前为止你拥有的css吗？避免IE6支持：）它对你、你的项目、你的客户和网络社区都更好。真的吗？但是DIV有另一个名称我可以将左DIV width auto和右DIV width 100%设置吗？是的。。对代码进行一些编辑可以做到这一点，但我不确定ie6是否兼容。或者你可以给宽度30%左右。。或者类似的东西，如果它满足了你的目的不适用于左分割宽度自动和右分割宽度100%不适用。。你需要稍微修改一下代码。。让我为你做这件事。。等几分钟。。正在忙于其他事情。您需要在左div中放置一些内容，因为它的宽度为：auto；。因此，如果没有内容，则宽度为0。结帐

body, html{
    padding:0;
    margin:0;
    position:relative;
    height:100%
}
.header, .footer{
    width:100%;
    background:#ccc;
    padding:10px;
    box-sizing:border-box;
}
.content{
    background:#eee;
    width:100%;
    padding:10px;
    height:100%;
    box-sizing:border-box;
    padding:10px;
}
.left{
    width:50%;
    float:left;
    background:#bbb;
    height:100%;
}
.right{
    width:50%;
    float:right;
    background:#aaa;
    height:100%;
}

.content{
    background:#eee;
    width:100%;
    padding:10px;
    height:100%;
    box-sizing:border-box;
    padding:10px;
    display:table
}
.left{
    width:auto;
    background:#bbb;
    height:100%;
    display:table-cell
}
.right{
    background:#aaa;
    height:100%;
    display:table-cell;
    width:100%
}