Question

我正在寻找支持以下内容的兼容CSS布局;

+-----+--------+
| A   | C      |
+-----+        |
| B   |        |
|     |        |
|     |        |
+-----+--------+

C是整个事物的容器。 A是一个div，根据它的内容（即它不是固定的高度）可以在高度上变化。 B是一个直接显示在A下方的div，一旦A取得它的份额，就会从C中填充剩余的高度。

我希望有一个非Javascript，非表格解决方案，希望如此！

编辑：我还应该补充一点，'C'代表一个设置高度的容器。在我当前的页面中，它是浏览器窗口高度的100％。

Answer 1

试试这个

<div id='wrapper'>
   <div id='sidebar'>
             <div class='a'></div>
             <div class='b'></div>
   </div>
   <div id='main-content'>

   </div>
</div>

然后根据您的需要应用样式。

例如

div#wrapper
{
  min-height:500px;
}

Answer 2

我认为你看起来像这样： -

HTML

    <div id="c">ccccccccc
<div class="a">asfdaaaaaaaaas</div>
<div class="b">adffffffssssssssssssssssssssss</div>
</div>

<强> CSS

    #c {
background:red;
}
.a {
background:blue;
width:200px;
float:left;
clear:both;
}
.b {
background:yellow;
width:200px;

}

观看现场演示： - http://jsfiddle.net/PAJzK/16/

Answer 3

我已经准备好了，但要小心，但内容B设置为隐藏溢出，所以当放入任何内容时，你必须考虑内容A中的内容。

<强> HTML

<div id='wrapper'>
<div id='sidebar'>
         <div class='a'>Content A</div>
Content B
</div>
<div id='main-content'>
Main Content
</div>
</div>

<强> CSS

html,body{
margin:0;
padding:0
}
#wrapper{
float:left;
width:100%;
height:100%;
background-color:green;
}
#sidebar{
float:left;
position:absolute;
width:30%;
height:100%;
background-color:red;
overflow:hidden;
}
.a{
float:left;
position:reative;
width:100%;
background-color:orange;
min-height:33%;
}
#main-content{
float:left;
position:absolute;
width:70%;
min-height:100%;
left:30%;
background-color:yellow;
}

CSS可能与缩减有关，但这就是我如何去做。

[编辑：我会使用Sandeep的解决方案]

演示：http://jsfiddle.net/AnBWP/

Answer 4

您可以使用display:table属性实现此目的：

<强> HTML

<div class='wrapper'>
   <div class='left'>
       <div class="table">
       <div class='a'>a</div>
             <div class='b'>b</div>
       </div>

   </div>
   <div class='c'>c</div>
</div>

<强> CSS

.wrapper{
    display:table;
    width:100%;
    height:500px;
}
.wrapper > div{
    display:table-cell;
    width:50%;
}
.table > div{
    display:table-row;
}
.left{background:yellow}
.a{
    background:red;
}
.b{
    background:green;
}
.c{
    background:blue;
}
.table{
    display:table;
    width:100%;
    height:100%;
}

选中此http://jsfiddle.net/X5Ze4/

CSS - Stacked DIV布局

4 个答案: