将垂直div扩展到全高

Question

我有一个html页面分为4个部分：页眉，菜单，内容和页脚。 标题在顶部，在底部的页脚。中间是左边的菜单和右边的内容。 页面的高度可以通过菜单或内容进行设置，具体取决于哪个更大（都可以更改）。 我想为延伸到页脚的菜单块放置背景，即使实际的菜单项太短。所以，基本上，我想根据它或内容的大小来填充菜单块，具体取决于哪个更大。有任何想法吗？

Answer 1

你可以设置菜单和内容方面与display: table-cell：

//add the table div as well as the cell class to menu and content 

<div class="header">header</div> 
<div class="table"> 
    <div class="cell menu">menu</div> 
    <div class="cell content">content</div> 
</div> 
</div> 
<div class="footer">footer</div> 


.header, .footer { width: 100%; height: 50px; } 
.table { display: table; width: 100%; } 
.cell { display: table-cell; } 
.menu { width: 50px; } 
.content { } 

JSFiddle Demo

Answer 2

方法1：

使用flexbox

这是如何使用flebox实现自己的目标的一个example。

---

方法2：

一个办法这样做会被设置 -

html, body { 
    height: 100%; 
} 

然后

div { 
    height: 100%; 
} 

这将使div充分高度的屏幕。

但这样做的缺点是，如果内容过大，那么它可能会削减在较小的屏幕

这里是一个pen作为一个例子

Answer 3

演示：http://jsfiddle.net/176dgmhy/

这不能使用任何东西，除了显示表或JavaScript。

显示表格单元格使得divs像表格单元一样工作，但不会使用tr，td等表格元素混淆CSS。

* { 
    border: 1px solid; 
} 
header { 
    padding: 20px; 
    text-align: center; 
} 
.cont { 
    width: 500px; 
} 
.wrap { 
    display: table; 
    width: 100%; 
} 
.wrap > * { 
    display: table-cell; 
} 
.menu { 
    width: 30%; 
} 
.wrap .stuff { 
    height: 200px; 
}