html - CSS 中的可滚动 Div

Question

我正在创建一个带有页眉和页脚的页面，以及一个中间内容 div，它可以包含可变数量的内容，这些内容应该只对中间 div 是可滚动的。整个页面应填充任何视口(viewport)/屏幕尺寸、100% 高度和 100% 宽度。

我正在使用这个 CSS:

*{margin:0;padding:0}
html, body {height:100%;width:100%;overflow:hidden}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
.header {border-bottom:2px solid #000}
.footer {border-top:2px solid #000}
.tdcontent {height:100%}
.content {height:100%; overflow:auto;}

我正在使用这个 HTML:

<table>
<tr><td class="header"><div><?php include 'header.htm' ?></div></td></tr>
<tr><td class="tdcontent"><div class="content"><?php include 'content.htm' ?></div></td> </tr>  
<tr><td class="footer"><?php include 'footer.htm' ?></td></tr>
</table>

以上在 Chrome 中运行良好。如果我插入的内容多于屏幕可以显示的内容，中间内容 div 会出现一个垂直滚动条，正如预期的那样。但是在IE和Firefox中，都没有出现滚动条，而且内容超出了页面底部。任何想法如何解决这个问题？我尝试将 iframe 作为跨浏览器解决方案，它适用于所有浏览器，但出于 SEO 原因，我不想使用 iframe。

编辑:问题似乎是将高度设置为 100%。 Chrome 喜欢它，但 IE 和 FF 似乎只需要以 px 为单位的固定高度。

编辑 2:我在 CSS 100% Height, and then Scroll DIV not page 找到了关于 SO 的答案

Answer 1

overflow:auto;// right and bottom scroll
overflow-y:auto;//only right scroll
overflow-x:auto;//only bottom scroll

更新:

但是对于这个任务来说这是一个非常酷的库 https://github.com/noraesae/perfect-scrollbar