Question

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

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

当我将内容块设置为'height：100％'时，它会离开屏幕（忽略标题块高度）。

考虑到标题的高度，如何将其拉伸到整个窗口高度？

基本示例（现在如何）：

http://cssdesk.com/Tcs98

感谢。

Answer 1

你遇到的问题是CSS中没有办法说这个元素是否高X然后这个元素应该是Y高。 (Not yet that is)

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

我使用jQuery是因为它很简单，并且不需要在很多浏览器中使用大量浏览器特定的检查：

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

这将获取DOM准备好的内容的高度，并将其与窗口的高度减去页眉和页脚的高度进行比较。

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

然后你需要修改当前的CSS并删除内容的100％高度，并在底部添加25px的填充以为页脚腾出空间。

Here is an example of large content.和Here is an example of small content

当然这是一个简单的例子，并没有处理窗口重新调整大小。

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

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');
        }
    });
});

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

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

Here is the fiddle

含量100％高度与窗口高度

1 个答案: