自动将div高度调整为窗口大小，但不小于孩子

Question

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

<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，th第三，第四，第五]。 我遇到的问题是，我希望.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高度将在“自动”和窗口大小之间来回闪烁。 根据停止调整大小的时间，它将两个大小之一作为其高度。

有任何想法吗？

Answer 1

您需要从HTML树开始一直到100％的高度开始：

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