将垂直div扩展到完整高度

Question

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

Answer 1

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

使用显示表或javascript之外的任何东西都无法实现。

显示表格单元格使得div像表格单元格一样，但不会使用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;
}

Answer 2

方法1：

使用 flexbox

这是如何使用flebox实现目标的example。

方法2：

这样做的一种方法是设置 -

html, body {
    height: 100%;
}

然后

div {
    height: 100%;
}

这将允许div占据屏幕的完整高度。

但缺点是，如果内容太大，那么可能会在较小的屏幕上剪切

以下是pen作为示例

Answer 3

您可以使用//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 { } 设置菜单和内容区域：

{{1}}

JSFiddle Demo