自动将div高度调整为窗口大小，但不小于children答案

【问题标题】：Automatically adjust div height to window size, but no smaller than children自动将div高度调整为窗口大小，但不小于children
【发布时间】：2013-07-22 18:40:09
【问题描述】：

我可以在以下问题上使用一些帮助。我所拥有的是一个相当基本的单页网站。剥离下来，它的结构看起来很像这样：

<div class="full_height" id="home">
  <div class="container">
    <div class="row">
      <div class="span8">
        CONTENT GOES HERE
      </div>
    </div>
  </div>
</div>

这个 div 结构重复 5 次，具有连续的 id 的 [home, second, third, Fourth, Fifth]。我遇到的问题是，我希望 .full_height 容器在加载站点时与窗口大小相同，并在调整大小时与窗口大小一起调整大小。此外，div 的大小永远不应小于其子级。

我目前的尝试是这样的：

$(window).on("resize load", resizeWindow);function resizeWindow( e ) {
  var newWindowHeight = $(window).height()-160;

  var idSelector = ["home","second","third","fourth","fifth"];

  for (var i = 0; i < idSelector.length; i++) {
    var element = document.getElementById(idSelector[i])

    if( element.offsetHeight < element.scrollHeight){
      $("#"+idSelector[i]).css("height", "auto" );
    }
    else{
      $("#"+idSelector[i]).css("height", newWindowHeight );
    } 
  }
}

现在，上面的脚本可以满足我的要求，但有一些小问题。

i) 在加载站点时，它仅将 div 高度调整为窗口大小，不满足孩子的要求。只有在调整窗口大小时才会这样做。

ii) 调整窗口大小时，div 高度会在“自动”和窗口大小之间来回闪烁。根据您停止调整大小的时间，它将采用两种尺寸中的任何一种作为其高度。

有什么想法吗？

【问题讨论】：

你有没有想过使用 width:XXX%;和他们？

标签： javascript

【解决方案1】：

您需要从 HTML 树的 100% 高度开始：

html, body, #full_height {
    height:100%;
}

【讨论】：