Question

我在一个有多个部分的主页上工作。

<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动态设置吗？

Answer 1

您可以使用viewport单位

<强> CSS

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

<强> DEMO HERE

Answer 2

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

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

您可能需要设置body＆amp; html标记height:100%，但并非总是如此。

Answer 3

您可以尝试这样 -

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

来自here

之后使用其他div制作div全屏高度

4 个答案: