Html 将垂直div扩展到最大高度

我有一个html页面分为4部分：页眉，菜单，内容和页脚。 页眉在顶部，页脚在底部。中间是左侧的菜单和右侧的内容。 页面的高度可以由菜单或内容设置，具体取决于哪个更大（两者都可以更改）。 我想在扩展到页脚的菜单块上放置一个背景，即使实际的菜单项很短。因此，基本上，我希望根据菜单块的大小或内容填充菜单块，这取决于哪个更大。有什么想法吗？

---

方法1:

使用flexbox

这是一个关于如何使用flebox实现目标的示例


方法2:

一种方法是设置-

html, body {
    height: 100%;
}

然后

div {
    height: 100%;
}

这将允许
div
占据屏幕的全部高度

但这样做的缺点是，如果内容太大，可能会在较小的屏幕上被剪切

以下是一个示例演示：

这只能使用显示表或javascript来实现

Display table cell使div的行为类似于表单元格，但不会使css与tr、td等表元素混淆

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

您可以使用
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 { }

//将表div以及单元格类添加到菜单和内容中
标题
菜单
内容
页脚
.header、.footer{宽度：100%；高度：50px；}
.table{显示：表格；宽度：100%；}
.cell{display:表格单元格；}
.菜单{宽度：50px；}
.content{}

请提供您在问题中尝试过的代码。我会尽快给出答案。您可以按照OP的要求将页脚放在底部吗？OP没有要求将页脚固定在窗口底部。。。问题要求页面高度由内容或菜单决定（以较大者为准）。谢谢。我喜欢你的答案的完整性，但我选择的答案是“答案”，所以它更容易阅读。谢谢你花了这么多时间，但是，非常感谢。