[英]Dynamic Container Height (jQuery)
I have a fixed-height (180px) header and fixed-height footer (50px). 我有一个固定高度(180像素)的页眉和一个固定高度的页脚(50像素)。 I'd like the container height to be: window height MINUS header MINUS footer.
我希望容器高度为:窗口高度MINUS标头MINUS页脚。
How do I achieve this using jQuery? 如何使用jQuery实现此目标?
Edited to Add: If the container height is updated on window resize, that'd be awesome! 编辑添加:如果在调整窗口大小时更新了容器高度,那就太棒了!
No need to use jquery. 无需使用jquery。
With css (i marked the key points to get it working, you can change the values accordingly): 使用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;
}
Results in something like: 结果如下:
|----------------------------------------|
| div#header |
| (80px height) |
|----------------------------------------|
| |
| div#contents |
| (top 83px, bottom 39px) |
| |
|----------------------------------------|
| div#footer |
| (36px height) |
|----------------------------------------|
This emulates old frames. 这模拟旧框架。 In this example, there is a little span of 3px between each
div
. 在此示例中,每个
div
之间只有3px的跨度。
EDIT2 : If you use some other absolute positioned divs (like tooltips), you have to add this condition to avoid a strange flickering in IE7: EDIT2 :如果您使用其他绝对定位的div(如工具提示),则必须添加此条件以避免IE7中出现奇怪的闪烁:
<!--[if IE 7]>
<style type="text/css">
#header
{
position: absolute;
}
</style>
<![endif]-->
EDIT3 : seems like I didn't paste the whole thing. EDIT3 :好像我没有粘贴整个东西。 This bit is essential to get it working with IE6.
这一点对于使其与IE6兼容至关重要。 Please note this is not one of the usual expression's hacks.
请注意,这不是通常的表达方式之一。
* html body
{
/* YOU'LL RECOGNIZE THESE NUMBERS WITH THE EXAMPLE ABOVE */
padding: 83px 0 39px 0;
}
* html #contents
{
height: 100%;
width: 100%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.