动态容器高度(jQuery) [英] Dynamic Container Height (jQuery)

问题描述

我有一个固定高度(180像素)的页眉和一个固定高度的页脚(50像素).我希望容器的高度为:窗口高度MINUS标头MINUS页脚.

I have a fixed-height (180px) header and fixed-height footer (50px). I'd like the container height to be: window height MINUS header MINUS footer.

如何使用jQuery实现此目标?

How do I achieve this using jQuery?

编辑添加:如果在调整窗口大小时更新了容器高度，那就太棒了！

Edited to Add: If the container height is updated on window resize, that'd be awesome!

推荐答案

无需使用jquery.

No need to use jquery.

使用CSS(我已标记要使其正常工作的关键点，您可以相应地更改值):

With css (i marked the key points to get it working, you can change the values accordingly):

#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的跨度.

This emulates old frames. In this example, there is a little span of 3px between each div.

EDIT2 : 如果您使用其他绝对定位的div(例如工具提示)，则必须添加此条件，以避免IE7中出现奇怪的闪烁:

EDIT2: If you use some other absolute positioned divs (like tooltips), you have to add this condition to avoid a strange flickering in IE7:

<!--[if IE 7]>
    <style type="text/css">
        #header
        {
            position: absolute;
        }
    </style>
<![endif]-->

EDIT3 :似乎我没有粘贴整个内容.这一点对于使其与IE6兼容至关重要.请注意，这不是通常的表达方式之一.

EDIT3: seems like I didn't paste the whole thing. This bit is essential to get it working with 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%;
}

在此处> 阅读.

这篇关于动态容器高度(jQuery)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！