我有一个固定高度(180px)的页眉和固定高度的页脚(50px)。我希望容器高度为:窗口高度减去页眉减去页脚。
如何使用 jQuery 实现此目的?
编辑添加:如果容器高度在窗口大小调整时更新,那就太棒了!
最佳答案
无需使用jquery。
使用CSS(我标记了使其工作的关键点,您可以相应地更改值):
#header
{
top: 0;
left: 0;
width: 100%;
height: 80px; /* KEY POINT */
overflow: hidden;
}
#footer
{
position: absolute; /* KEY POINT */
bottom: 0;
left: 0;
width: 100%;
height: 36px; /* KEY POINT */
overflow: hidden;
}
#contents
{
position: fixed; /* KEY POINT */
top: 83px; /* KEY POINT */
left: 0;
right: 0;
bottom: 39px; /* KEY POINT */
right: 0;
overflow: auto;
}
结果如下:
|----------------------------------------|
| div#header |
| (80px height) |
|----------------------------------------|
| |
| div#contents |
| (top 83px, bottom 39px) |
| |
|----------------------------------------|
| div#footer |
| (36px height) |
|----------------------------------------|
这模拟了旧框架。在此示例中,每个 div
之间有一个 3px 的小跨度。
编辑2: 如果您使用其他一些绝对定位的 div(例如工具提示),则必须添加此条件以避免 IE7 中出现奇怪的闪烁:
<!--[if IE 7]>
<style type="text/css">
#header
{
position: absolute;
}
</style>
<![endif]-->
EDIT3:看来我没有粘贴整个内容。这一点对于使其与 IE6 一起工作至关重要。请注意,这不是常见的表达式技巧之一。
* html body
{
/* YOU'LL RECOGNIZE THESE NUMBERS WITH THE EXAMPLE ABOVE */
padding: 83px 0 39px 0;
}
* html #contents
{
height: 100%;
width: 100%;
}
阅读here了解更多信息。
关于jquery - 动态容器高度 (jQuery),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1900540/