Question

在我网站主要部分的布局中，我需要两个灵活的列。高度是已知的并且始终相同。但宽度应随着浏览器的宽度自动增加。

enter image description here

我需要这个，因为在div＃1中应该是不同的内容（我认为是浮动的）和背景而不是div＃2（我假设浮动）。整个布局使用浏览器增加宽度（宽度100％）。

如果div 1和2的背景相同（父级的包装器+背景设置），则很容易制作，但在此示例中背景不同。我不知道如何自动增加这两个div的宽度。

Answer 1

调整div#1和div#2

的宽度参数

    div #header {
        display: block;
        position: absolute;
        top: 0px;
        height: 100px;
    }

    div #div1 {
        display: block;
        position: absolute;
        top: 100px;
        width: 50%;
        left: 0px;
    }

    div #div2 {
        display: block;
        position: absolute;
        top: 100px;
        width: 50%;
        right: 0px;
    }

Answer 2

这就是你想要的：

    <div class="container">
        <div class="header">
            This is header
        </div>
    </div>
    <div class="container">
        <div class="div1">
            This is left div
        </div>
        <div class="div2">
            This is right div
        </div>
    </div>
    <div class="container">
        <div class="footer">
            This is footer
        </div>
    </div>

.container{
    max-width:960px;
    padding:0 15px;
    height:auto;
    position:relative;
    clear:both;
}

.header{
    position:relative;
    height:100px;
    background-color:yellow;
    width:100%;
    display:block;
}

.div1{
    position:relative;
    height:400px;
    background-color:pink;
    width:50%;
    float:left;
}
.div2{
    position:relative;
    height:400px;
    background-color:green;
    width:50%;
    float:left;
}

.footer{
    position:relative;
    height:100px;
    background-color:cyan;
    width:100%;
    display:block;
}

我创建了jsfiddle demo

Answer 3

一个好的，简单的语义布局怎么样？下面使用定位来维护固定的页脚，这里是example without

Demo Fiddle

HTML

<header></header>
<section></section>
<section></section>
<footer></footer>

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
}
header, footer, section {
    position:absolute;
    width:100%;
}
header, footer {
    background:green;
    height:50px;
}
footer {
    bottom:0;
}
section {
    top:50px;
    bottom:50px;
    width:50%;
    background:yellow;
    overflow-x:auto;
}
section:last-of-type {
    background:blue;
    left:50%;
}

Answer 4

试试这个

#container{
    width:100%;
    clear:both;
}
#header{
    width:100%;
}
#div1{
    height:400px;
    width:50%;
    float:left;
}
#div2{
    height:400px;
    width:50%;
    float:right;
}
#footer{
    width:100%;
}

两个DIV具有自动宽度

4 个答案:

Demo Fiddle