0

我想在我的网站上有一个高度的页眉，并在页面底部固定一个页脚。我对内容块高度有疑问。

我想让内容在没有太多内容文本时拉伸到整个窗口高度，并在它大于窗口高度时拉伸到内容的整个高度。

当我将内容块设置为“高度：100%”时，它会超出屏幕（忽略标题块高度）。

考虑到标题的高度，如何使它伸展到整个窗口高度？

基本示例（现在如何）：

http://cssdesk.com/Tcs98

谢谢。

4

1 回答 1

2

您遇到的问题是 CSS 中没有办法说如果这个元素是 X 高那么这个元素应该是 Y 高。（还没有）

您需要使用脚本来获取窗口的高度并将其与内容的高度进行比较。

我为此使用 jQuery，因为它很简单，并且不需要一大堆特定于浏览器的检查即可在许多浏览器上工作：

$(function(){
    if($('.content').height() < $(window).height() - 225){
        $('.content').css('height',($(window).height() - 225) + 'px');
    }
});

这将获取 DOM 就绪时内容的高度，并将其与 Window 的高度减去页眉和页脚的高度进行比较。

如果它小于窗口高度减去页眉和页脚（实际上是您的内容区域），那么它将高度设置为该值。

那么你需要修改当前的 CSS 并移除内容的 100% 高度并在底部添加 25px 的填充为页脚腾出空间。

这是一个大内容的例子。这是一个小内容的例子

当然这是一个简单的例子，不处理窗口大小调整。

编辑：在花了一天的时间思考之后，我意识到让它完全响应并不难。

var initialHeight, contentHeight;

$(function(){    
    initialHeight = $('.content').height();
    contentHeight = $(window).height() - 225;

    if(initialHeight < contentHeight ){
        $('.content').css('height',contentHeight + 'px');
    }

    $(window).resize(function(){
        contentHeight = $(window).height() - 225;
        if(initialHeight < contentHeight){
            $('.content').css('height',contentHeight + 'px');    
        }else{
            $('.content').css('height',initialHeight + 'px');
        }
    });
});

使用上面的代码，窗口和内容高度无关紧要；它总是会调整大小以适应“内容”区域。

您将“内容”区域定义为未被页脚和页眉占用的“窗口”数量。然后在第一次加载窗口时获取内容元素的高度。如果内容区域比内容元素大，则设置与内容区域匹配的新高度，如果变小，则将高度设置为与开始时相同的高度。

这是小提琴

于 2013-02-19T16:55:34.020 回答