CSS - 堆叠的DIV布局

我正在寻找兼容的CSS布局，它将支持以下内容;CSS - 堆叠的DIV布局

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

C是整个事情的容器。 A是根据其内容（即，它不是固定高度）的高度可变的div。 B是直接显示在A下面的div，并且一旦A拿走了它的份额，就从C填充剩下的高度。

我希望有一个非Javascript，非表的解决方案，希望！

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

来源

2012-03-29 Barg

你要什么才达到 - 为什么是B有舒展结束了吗？如果它不仅仅设置A上的浮动和A和C上的宽度，另一种选择是使用CSS框架如骨架，twitter引导或蓝图让生活更轻松 – WKordos 2012-03-29 11:22:09

您可以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/

来源

2012-03-29 12:17:36 sandeep

这个效果很好，除了a和b是相同的高度 - 我想要一个小到它所需要的，并且b到填补其余。我设法通过增加高度来解决这个问题：0;到一个班级。请参阅：http://jsfiddle.net/Ywtwv/不漂亮，但它的作品 – Barg 2012-03-30 16:16:18

试试这个

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

来源

2012-03-29 11:25:02

我应该说 - C是一组高度。具体来说，它是浏览器窗格的整个高度。 – Barg 2012-03-29 11:50:53

我认为你正在寻找这样的： -

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/

来源

2012-03-29 11:40:19

不完全 - 在这里，我已经修复了容器高度：http://jsfiddle.net/3cr3x/ – Barg 2012-03-29 11:49:34

使用最小高度或高度：auto;而不是固定的高度：-http：//jsfiddle.net/3cr3x/2/ – 2012-03-29 11:59:13

我了个去，并拿出了这一点，虽然内容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/

来源

2012-03-29 12:06:22 number8pie

CSS - 堆叠的DIV布局

回答

相关问题