Question

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

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

| div 0，可变高度

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

| div 1，可变高度

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

| div 2，可变高度

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

| div 3，固定高度

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

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

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

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

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

我试过显示：table / table-row和position绝对/相对解决方案，但根本无法获得！

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

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

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

谢谢

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

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

Stackin DIV（可能是纯CSS）固定高度和非固定高度

2 个答案: