0

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

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

有任何想法吗？

4

1 回答 1

1

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

html, body, #full_height {
    height:100%;
}
于 2013-07-23T15:35:22.383 回答