设置元素的最小高度等于文档的可见部分

Question

我有一个至少包含标题和容器div的页面，我想为容器div设置min-height以覆盖文档的可见部分（我不想将其固定为100％）

所以我想我可以使用元素高度，顶部填充和顶部边距来获取文档高度

function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}

$(document).ready(function(e) {

    var h = getDocHeight();
    var hedaer = $('.header').height();
    var c = $('.container').css('height') ;
    var m = $('.container').css('padding-top') ;
    var p = $('.container').css('margin-top') ;
    var n = parseInt(h) -  parseInt(c) -   parseInt(m) - parseInt(p) - parseInt(hedaer) ;
    var n = n +  parseInt(c)   ;
    $('.content').css('min-height' , n+'px');

});

但是我总是最终或多或少地发现容器中还有许多其他元素，它们具有自己的高度，内边距和边距，这让我头疼不已

有没有更简单的方法可以做到这一点？

Answer 1

不确定您想要的是什么，我的答案可能不适合您，具体取决于您要定位的浏览器，但显示：box可能是解决方案（webkit的代码，以适应其他供应商前缀）：

<div class="container">
  <div class="header">blue</div>
  <div class="content">red</div>
</div>

和CSS

.container {
  /*create a vertical box*/
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /*ensure it takes of all available width and height in my fiddle :-D */
  position: fixed;
  top:0; bottom: 0; left: 0; right: 0;
}
/*so that we see something*/
.header, .content {background: blue;margin: 20px;padding: 40px;}
.content {
  margin: 20px;
  padding: 40px;
  background: red;
  /*this div will have all available height in his parent, 
    minus what's already taken, with the beauty of box-flex */
  -webkit-box-flex: 1;
}

...仍然是一个非常不稳定且不受支持的规范，但我认为这值得一提。 您可以在http://jsfiddle.net/S6F3S/1/上看到运行中的功能（使用Chrome或safari）