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

【问题标题】：Two columns liquid layout with header and footer带有页眉和页脚的两列液体布局
【发布时间】：2015-03-11 07:07:32
【问题描述】：

我的 HTML 页面有 2 列和页脚和页眉：

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

在我的情况下，我想要具有自动宽度的左 DIV 和具有 100% 宽度的数据 DIV。就像在这张图片上：如何使用 IE 6 支持 CSS？谢谢！

【问题讨论】：

你能把你目前的css贴出来
避免 IE6 支持 :) 这对您、您的项目、您的客户和网络社区都有好处。真的
有些东西 jsfiddle.net/z8hbgena/1 但 DIV 有其他名称

标签： html css css-position fluid-layout

【解决方案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>

【讨论】：

【解决方案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%
}

【讨论】：

我可以设置左 DIV 宽度自动和右 DIV 宽度 100% 吗？
是的.. 代码中的一些编辑会做到这一点，但是我不确定 ie6 的兼容性。否则你可以给左边 30% 和右边 70% 的宽度......或者类似的东西，如果它满足你的目的。
jsfiddle.net/s37z0pfu/5 - 不适用于左 DIV 宽度自动和右 DIV 宽度 100%
不是这样的..你需要稍微改变一下代码..让我为你做..等几分钟..忙别的事情..
你需要在左边的 div 里放一些内容，因为它有 width:auto;。因此，如果没有内容，它将采用 0 宽度。签出这个jsfiddle.net/4dgaurav/s37z0pfu/8