如何仅在没有正文滚动条的情况下使用整页

Question

我正在尝试构建一个页面，其中所有内容都适合用户设备的整个宽度和高度，而与内容量无关。

我正在努力的事情是在CSS中设置div＃content的高度。在较小的设备上，＃content会降低，而在大型设备上，它将更高。

这是一张图片，这是我的目标。

也在Codepen中创建了页面：
https://codepen.io/creativeresul/full/JVGQRe

    #content {
      background: white;
      padding: 15px;
      height: 100%;
      overflow-y: scroll;
    }

Answer 1

为每个容器设置高度，#content和#content-container除外。如果您不想在这种情况下滚动，则在不需要文本时，只需使用默认的overflow-y: auto;。 如果您知道所有确切的高度（没有最大和最小高度），则可以执行以下操作：

#content {
  height: calc(100% - all other container in px or % or whatever);
}

如果您将height: 100%设置为代表整个窗口的高度（通常，因为我认为这是相对的），这就是即使您没有内容也可以滚动的原因。

在这里您可以找到很多方法来填充剩余的位置：Make a div fill the height of the remaining screen space

Answer 2

CSS的答案更好，因为它不需要其他依赖关系，但是只能在支持CSS3的浏览器上工作，但是如今这已不是真正的问题，但是如果您想使用JavaScript并可以添加JQuery，以下脚本将起作用

$(window).resize(function(){
  var el = $('#content-container');
  var footer = $('footer');
  el.height(footer.offset().top - el.offset().top);
});

此解决方案也有一些警告，因为它可能会因调整大小过大而滞后。

您可以在https://cdnjs.com/libraries/jquery/

处从cloudfare CDN获取JQuery。

Answer 3

您可能希望使用vh和vw单位而不是px（https://www.w3schools.com/cssref/css_units.asp）。

但是请注意，100 vh存在一些问题，通常对于用户来说太高而无法查看您的所有内容（因为屏幕顶部的浏览器控件会占用一些垂直空间，并且可能导致其他UX问题）。看到此问题：CSS3 100vh not constant in mobile browser

一个可能的解决方案是根据 如上述SO问题中的某些答复所述，https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight可以使用%单元设置任何后代元素的样式。

Answer 4

您可以将自定义高度应用于页面部分。

请参考代码段。

#top{

  background-color: antiquewhite;
  height:50vh;
}


#mid{

  background-color: #eee;
  height:30vh;
  overflow-y:scroll;
}


#bottom{

  background-color: #bbc;
  height:20vh;
}

<div id="top"></div>

<div id="mid">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies metus ut urna mollis, at efficitur magna iaculis. Suspendisse posuere malesuada sem at imperdiet. Morbi eget consectetur metus, id tempor magna. Nullam mauris ipsum, dapibus quis maximus id, porttitor non diam. Donec tempor mauris cursus urna efficitur, in vulputate velit sodales.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies metus ut urna mollis, at efficitur magna iaculis. Suspendisse posuere malesuada sem at imperdiet. Morbi eget consectetur metus, id tempor magna. Nullam mauris ipsum, dapibus quis maximus id, porttitor non diam. Donec tempor mauris cursus urna efficitur, in vulputate velit sodales.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies metus ut urna mollis, at efficitur magna iaculis. Suspendisse posuere malesuada sem at imperdiet. Morbi eget consectetur metus, id tempor magna. Nullam mauris ipsum, dapibus quis maximus id, porttitor non diam. Donec tempor mauris cursus urna efficitur, in vulputate velit sodales.




</div>


<div id="bottom"></div>