在[重复]之后使div与其他div的屏幕全高答案

【问题标题】：making div full height of screen with other divs after [duplicate]在[重复]之后使div与其他div的屏幕全高
【发布时间】：2015-10-14 12:59:01
【问题描述】：

我正在制作一个包含多个部分的主页。

<div id="section1">
    <!-- This needs to be the full height of the screen -->
</div>
<div id="section2">

</div>
<div id="section3">

</div>

我希望 section1 成为屏幕的全高，然后用户可以向下滚动以查看 section2 和 section3 - 这可以单独使用 CSS 完成还是需要 JS 来动态设置?

【问题讨论】：

公平点 - 没看到！

标签： javascript jquery css

【解决方案1】：

你可以使用viewport单位

CSS

#section1{
    display: block;
    background: #000;
    width: 100vw;
    height: 100vh;
}

DEMO HERE

【讨论】：

【解决方案2】：

这里不需要 JavaScript。使用简单的 css，您可以轻松完成：

#section1{
    width:100%;
    height:100%;
    display:block; // or inline-block - Optional
}

您可能还需要设置body 和html 标签height:100%，但并非总是如此。

【讨论】：

当使用百分比值作为高度时，父元素必须设置高度

【解决方案3】：

你可以这样试试——

    html, body{height: 100%;}
    #section1{background: red;min-height:100%;}

<div id="section1">
   s <!-- This needs to be the full height of the screen -->
</div>
<div id="section2">

</div>
<div id="section3">

</div>

【讨论】：

【解决方案4】：

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});

来自here

【讨论】：