我们正在创建一个包含标题，内容和页脚的网页。页眉和页脚应始终可见，内容应可滚动。容器div具有固定的宽度但没有固定的高度。我通过使用css粘性页脚（http://ryanfait.com/sticky-footer/）解决了将页脚保持在最后的问题。内容区域分为两部分（content1和content2），并具有灵活的可滚动div。
问题是，内容区域的高度没有绝对定义（即100％）。 我们希望当content1或content2中的数据超出屏幕大小时，它会自动溢出到它自己的独立可滚动条中，页眉和页脚仍然可见。
我们希望避免使用iframe。有没有办法，我们可以用javascript（jquery或其他）来做到这一点？我们从goole docs主页获得了很大的启发。
任何帮助都将受到高度赞赏。
Choesang：）
答案 0 :(得分：2)
首先找到你必须使用的视口的高度，我们称之为'viewportHeight'。如果已设置页眉和页脚的内容，则它们将具有高度。计算它们的高度并将它们加在一起，我们称之为'usedHeight'。放置内容的高度为：remainingHeight = viewportHeight - usedHeight;
如果您将内容容器上的css属性设置为height = remainingHeight和overflow-y = auto，则您的内容将始终至少占用最小内容高度，如果内容太多，则会强制滚动酒吧出现。
我们将使用Prototype库来帮助我们，但我们可以轻松地使用jQuery甚至编写代码来自己计算高度。
注意在正文中我将高度设置为100％，填充为0，边距为0.大多数浏览器在身体周围放置10px填充，这将导致您的页脚显示我正在展示的过程中的屏幕。
<html>
<head>
<script type='text/javascript' src='prototype.js'></script>
</head>
<body style='height: 100%; padding: 0; margin: 0;'>
<div>
<div id='header'>header text</div>
<div id='content'>content text</div>
<div id='footer'>footer text</div>
</div>
<script type='text/javascript'>
// Here we will set the text of the content, calculate its height,
// and set the max height. In production I would use less lines,
// for here writing each step out for clarity.
var viewportHeight = document.viewport.getHeight();
var headerHeight = $('header').getHeight();
var footerHeight = $('footer').getHeight();
var usedHeight = headerHeight + footerHeight;
var remainingHeight = viewportHeight - usedHeight;
// we have our remaining height, now set the style.
$('content').setStyle({
'height': remainingHeight,
'overflow-y': 'auto'
});
</script>
</body>
</html>
答案 1 :(得分：0)
在显示内容之前，您可以将其附加到屏幕外的div。然后获取内容的高度，并根据客户端视口的大小进行计算（如果需要可滚动）。 然后从屏幕外的div中取出内容，并使用为视口指定的高度附加到主div，并溢出：auto。