我需要在页眉和页脚之间创建一个可滚动的div，不使用任何固定的像素大小。
我看过以下文章：100% height div between header and footer，但不幸的是，它在标题和页脚中使用了我绝对想避免的固定大小。 标题是一个div，其中包含带有徽标和一些文本的表格。我希望即使用户缩放窗口或调整窗口大小也能在整个内容中显示它 在页脚上，我有一个带有表单按钮的表格。同样的问题，我希望即使用户在X或Y窗口中调整大小也要显示它。页脚底部应坚持浏览器的寡妇底部。 然后，在中间，我要使用剩余空间的100％。 （除非有简单的解决方案，否则我不关心显示空间是否过小）
<div id="header>
<table><tbody>
<tr><td>LOGO</td><td>Some intro text on a few lines</td></tr>
</tbody></table>
<!-- optionnel error line (arbitrary length) if previous form submission failed -->
</div>
<form>
<div id="variable_scrollable_content">
<!-- multiple field sets hosting some input (text, select, ...) -->
</div>
<div id="footer">
<table><tbody>
<tr><td>Save button</td><td>Reset button</td></tr>
</tbody></table>
<!-- A few lines of text -->
</div>
</form>
我无法使用固定的像素大小，因为如果用户减小浏览器窗口的宽度，则页眉和页脚中的行数将会增加。 作为一个简单的总结： 页眉，内容和页脚div的宽度为100％ 标头的最小高度可以显示其所有内容 页脚的最小高度可以显示其所有内容 content div使用页眉和页脚之间的所有剩余高度。 如果用户调整浏览器窗口的高度，则高度变化只会影响内容div。 如果用户使用来调整浏览器窗口的大小并更改文字换行（多或少行），则页眉和页脚div的高度会发生变化
没有JQuery。除此之外，CSS3和HTML5和javascript都可以。我只支持Safari，Firefox和chrome的最新版本。我不需要支持EDGE或IE。
任何技巧都将不胜枚举。