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％宽度。就像在这张图片上： enter image description here 如何使用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%
}

Answer 2

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

.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 个答案: