内容100％窗口高度的高度

Question

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

我要让内容拉伸到整个窗口高度时，没有太多的内容文字和拉伸到内容的全高度时，它比窗口的高度大。

当我设置内容块“高度：100％”，它超出屏幕（忽略头块高度）。

考虑到头部的高度，我怎样才能将它伸展到全窗口高度？

基本的例子（它是如何现在）：

http://cssdesk.com/Tcs98

感谢。

Answer 1

你的问题是，如果这个元素是X高，那么CSS中没有办法说这个元素应该是Y高。 (Not yet that is)

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

使用jQuery这是因为它很简单，并不需要一大堆的浏览器专项检查碰到很多浏览器的工作：

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

这需要内容的高度在DOM准备就绪，将其与窗口的高度减去页眉和页脚的高度进行比较。

如果小于窗口的高度更低的页眉和页脚（有效内容的区域），然后将其设置高度，以该值。

，那么你需要修改目前的CSS和删除内容的100％的高度，并在底部添加填充25像素，以腾出空间页脚。

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