Stackin DIVs (可能是纯 CSS) 固定高度和非固定高度答案

【问题标题】：Stackin DIVs (possibly pure CSS) fixed-height and non fixed oneStackin DIVs (可能是纯 CSS) 固定高度和非固定高度
【发布时间】：2014-05-02 04:28:21
【问题描述】：

我大家！我无法弄清楚获得这样的布局的最佳解决方案是什么：

+--------------------------------------------- --------------+

| div 0 , 可变高度

+--------------------------------------------- --------------+

| div 1 , 可变高度

+--------------------------------------------- --------------+

| div 2 , 可变高度

+--------------------------------------------- --------------+

| div 3 , 固定高度

+--------------------------------------------- --------------+

| div 4，可变高度，但必须是可滚动的（确实包含应该可滚动的表格）

+--------------------------------------------- --------------+

| div 5 ，固定高度，贴在底部，始终可见！

+--------------------------------------------- --------------+

我尝试了显示：表/表行和位置绝对/相对解决方案，但根本无法获得！

编辑：如果通过将 div3、div4、div5 包装到另一个 div 中来获得相同的行为，那也很好。

EDIT2：这是我的解决方案与display:table jsfiddle

但是，是否可以使div#cont 可滚动？

谢谢

【问题讨论】：

向我们展示您目前提供的代码。
对于 div 5 尝试 position: fixed，对于 div 0 尝试 float: left; clear: both。如果要使 div 5 粘在底部，请确保将 body 和 html 设置为 100% 高度。

标签： css html layout fixed

【解决方案1】：

请按照下面的 css 来永久修复 div 底部..

div5

.fixed_footer{ position:fixed; height:20px; (you can change the value as you want it to be.) bottom:0; left:0; width:100%; }

【讨论】：

【解决方案2】：

这样的？？

http://jsfiddle.net/46fud/

HTML

<div class='commonDiv'>variable height<br>variable height</div>
<div class='commonDiv'>variable height<br>variable height</div>
<div class='commonDiv'>variable height<br>variable height</div>
<div class='div1'>fixed height</div>
<div class='div2'>fixed height, scrollable<br>fixed height, scrollable<br>fixed height, scrollable<br>fixed height, scrollable<br></div>    
<div class='div3'>fixed height at bottom</div>

CSS

.commonDiv{ float:left; width:100%; border:1px #000000 solid; }
.div1{float:left; height:50px; border:1px #000000 solid; width:100%;}
.div2{float:left; height:50px; overflow:scroll; border:1px #000000 solid; width:100%;}
.div3{position:fixed; bottom:0; height:50px; border:1px #000000 solid; width:100%;}

【讨论】：

近乎完美，但不使用 javascript .div2 怎么能到达 .div3 的顶部？
似乎不起作用。 z-index 如何有用？我的意思是，.div3 不应该超过 .div2，而只是在之后。