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

Question

我的 HTML 页面有 2 列以及页脚和页眉:

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

在我的例子中，我希望左 DIV 具有自动宽度，而数据 DIV 具有 100% 宽度。就像这张图片: 如何在 IE 6 支持下使用 CSS？谢谢!

Answer 1

Demo

html

<div class="header">
    header content
</div>

<div class="content">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

<div class="footer">
    footer content
</div>

CSS

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%;
}

---

根据需要 DEMO

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%
}