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

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% 宽度。就像这张图片：如何 CSS 支持 IE 6？谢谢！

Answer 1

我认为它会起作用。请检查并告诉我。

.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>

Answer 2

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

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

Two columns liquid layout with header and footer

html

css

css-position

fluid-layout