0

我有一个页面至少包含一个标题和一个容器 div 我想为容器 div 设置最小高度以覆盖文档的可见部分（我不想将其修复为 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');

});

但我总是最终或多或少地在我的容器中有许多其他元素，它们有自己的高度、填充和边距，想想它们就让我头疼

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

4

1 回答 1

1

不完全确定您想要什么，我的答案可能不适合您所针对的浏览器，但 display: 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;
}

... 仍然是一个非常不稳定且不受支持的规范，但我认为这值得一提。您可以在此处查看它的运行情况（使用 chrome 或 safari）http://jsfiddle.net/S6F3S/1/

于 2012-09-22T19:17:07.230 回答