我们正在创建一个包含页眉、内容和页脚的网页。页眉和页脚应始终可见，内容应可滚动。容器 div 具有固定宽度但没有固定高度。我通过使用csssticky footer（http://ryanfait.com/sticky-footer/）解决了将页脚保留在最后的问题。内容区域分为两部分（content1和content2），并具有灵活的可滚动div。
问题是，内容区域的高度不是绝对定义的（即 100%）。 我们希望当 content1 或 content2 中的数据超过屏幕大小时，它会自动溢出到自己独立的可滚动条中，并且页眉和页脚仍然可见。
我们希望避免使用 iframe。有什么办法，我们可以用javascript（jquery或其他）来做吗？我们从 goole docs 主页获得了极大的启发。
任何帮助将不胜感激。
乔桑 :)
【问题讨论】：
标签： javascript jquery html css
嘿 Choesang，redsquare，这是另一种无需将任何内容从屏幕上移开的方式。
首先找到您必须使用的视口的高度，我们将其称为“viewportHeight”。如果您的页眉和页脚的内容已经设置，它们将有一个高度。计算它们的高度并将它们加在一起，我们称之为“usedHeight”。您放置内容的剩余高度是：remainingHeight = viewportHeight - usedHeight;
如果您将内容容器上的 css 属性设置为 height=remainingHeight 和 overflow-y = auto，您的内容将始终至少占用最小内容高度，如果内容过多，则会强制滚动栏出现。
我们将使用 Prototype 库来帮助我们，但我们也可以轻松地使用 jQuery，甚至自己编写代码来计算高度。
注意在正文中，我将高度设置为 100%，内边距设置为 0，边距设置为 0。大多数浏览器在正文周围设置了 10 像素的内边距，这将导致您的页脚显示在我正在显示的过程中的屏幕。
【讨论】：
在显示内容之前，您可以将其附加到位于屏幕外的 div 中。然后获取内容的高度，并根据客户端视口的大小计算是否需要可滚动。 然后将内容从屏幕外 div 中取出并附加到您的主 div 中，并使用为视口和溢出指定的高度：auto。
【讨论】：