Question

我正在创建一个带有页眉和页脚的页面，以及一个中间内容div，它可以包含可以仅为中间div滚动的可变内容量。整个页面应填充任何视口/屏幕大小，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

找到了答案

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

Answer 2

试试这个：

.content {overflow:scroll-y}

我的坏，当我写这个时我真的很累^

是.content {overflow-y:scroll}

CSS中的可滚动Div

2 个答案: