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，third，4th，5th]。我遇到的问题是，我希望.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 );
    } 
  }
}

现在，上面的脚本完成了我正在寻找的东西，但有一些hick-up。

i）加载网站后，它只会将div高度调整为窗口大小，不符合儿童要求。只有在调整窗口大小时才会这样做。

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

有什么想法吗？

Answer 1

您需要从HTML树的所有方向开始100％高度：

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

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

1 个答案: