静态容器高度结合动态大小的容器，可能吗？ [英] Static container height combined with a dynamically sized container, possible?

问题描述

有两种方法可以让两个< div> 容器，一个具有静态高度，另一个是底层动态，基本上只占用剩余部分viewport？

Is there a way to have two <div> containers, one having a static height, and a second underneath dynamic, basically just takes up the remaining portion of the viewport?

在动态容器中，如果内部有溢出，容器本身将相应地显示滚动条。这样，视口应该需要一个y轴滚动条。

Inside the the dynamic container, if there is overflow within, the container itself would show scrollbars accordingly. That way the viewport should ever need a y-axis scrollbar.

示例

任何想法？

推荐答案

我会这样做： http://jsfiddle.net/tw16/X5rWb/

CSS ：

CSS:

.content{
    border: 1px solid red;
    overflow-y: auto; /* now scrollbars will only appear when needed */
    overflow-x: hidden;
}

jQuery： b

$(function () {
    adjustHeight();
});

$(window).resize(function () {
   adjustHeight();
});

function adjustHeight() {
    var windowHeight = $(window).height() - 2;
    var headerHeight = $('.header').outerHeight();

    $('.content').height(windowHeight - headerHeight);
}

中的2 windowHeight 将 .content div加在1px顶部和1px底部边框。

The 2 in windowHeight comes from adding the 1px top and 1px bottom border of the .content div together.

使用 outerHeight（）对于 .header 意味着不需要做任何添加，因为顶部和底部填充和边框都包括在内。如果你使用 outerHeight（true），这也会包括顶部和底部边距。

Using outerHeight() for the .header means there is no need to make any additions as the top and bottom padding and borders are included. If you were to use outerHeight(true) this would also include the top and bottom margin.

这篇关于静态容器高度结合动态大小的容器，可能吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！