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

Question

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

我正在努力解决的问题是在CSS中设置div＃内容的高度。在较小的设备上，＃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);
});

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

你可以在这里从cloudflare CDN获得JQuery：qazxsw poi

Answer 3

您可能想要使用https://cdnjs.com/libraries/jquery/和vh单位而不是vw（px）。

但请注意，https://www.w3schools.com/cssref/css_units.asp存在一些问题，通常太高，用户无法看到您的所有内容（因为屏幕顶部的浏览器控件将占用一些垂直空间，并可能导致其他UX问题）。看到这个问题：100 vh

一个可能的解决方案是根据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;
}