对容器使用“height: 100vh”时，出现垂直滚动条答案

【问题标题】：When using "height: 100vh" for the container, vertical scrollbar appears对容器使用“height: 100vh”时，出现垂直滚动条
【发布时间】：2017-11-22 13:11:19
【问题描述】：

我希望内容占据浏览器窗口的整个高度，但不能超过。

当使用 100vh 作为容器高度时，我可以看到出现垂直滚动条。

.container {
  height: 100vh;
  border: 3px solid lightsteelblue;
  border-radius: 10px;
}

可能是什么问题？

编辑： 更详细的代码：

CSS

html, body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.container {
  height: 100vh;
  margin: 0px;
  padding: 0px;
}

.page_content {
  height: 85vh;
  width: 95vw;
  border: 3px solid lightsteelblue;
  border-radius: 10px;
  overflow-y: auto;
  margin: 0 auto;
}

.footer {
  height: 14vh;
  width: 95vw;
  margin: 0px auto;
  padding: 0px;

}

HTML

<html>
   <body>
     <div class="container">
        <div class="page_content">
          ...
        </div>
        <div class="footer">
         ...
        </div>
     </div>
   </body>
</html>

【问题讨论】：

仅供参考。 100vh 可以而且将会在移动浏览器上表现得很奇怪。见：stackoverflow.com/questions/37112218/…
@DanielZiegler 谢谢，它不适用于移动浏览器

标签： css

【解决方案1】：

我经常遇到这个问题，我的解决方案有点不正统，但就是这样

 body{
           height: 80vh;
            }

【讨论】：

【解决方案2】：

有一个用户代理样式表可以添加到任何 Web 文档中，它只是每个浏览器应用于正在查看的文档的默认样式集，但是这些规则具有非常低的优先顺序。当然，作者可以超越这些规则，而且他们经常这样做。

从今天起，如果作者没有添加或覆盖，谷歌浏览器会为您的文档添加 8px 边距。

因此，假设您在整个 HTML 文档中添加了一个名为 .container 的 div。你可以尝试做这样的事情。

body {
    margin: 0;
    height: 100vh;
}
.container {
    height: 100%;
    //if you want to add border to this container,
    border: 1px solid cyan;
    box-sizing: border-box;
}

此外，如果您在容器中有任何其他 div，它们将利用 .container 类 100vh 值。您可以将 70% 的高度分配给 .page-content，将 30% 的高度分配给 .footer div。

.page-content {
     height: 70%
     border: 1px solid aquablue;
     box-sizing: border-box;
}
.footer {
     height: 30%;
}

【讨论】：

当我尝试为主体提供边距和高度时，它移除了滚动条，谢谢。但是当我将高度设置为 100% 时，如果内容为空，则 div 边界线将不会出现

【解决方案3】：

遇到同样的情况，浏览器中的一些自动边距会导致出现垂直滚动条。我遇到的非常简单的解决方法是使用 99vh 而不是 100vh

.container {
height: 99vh;
border: 3px;
box-sizing: border-box;

}

【讨论】：

如果你的元素和主体有两种不同的背景颜色或图像，这会产生难看的效果。
@jidu0106，我不知道它是什么，但这就像一个魅力。

【解决方案4】：

body {
  margin: 0;
}

.container {
  height: 100vh;
  border: 3px solid lightsteelblue;
  border-radius: 10px;
  box-sizing: border-box;
}

这成功了。在这里查看和测试它：https://jsfiddle.net/ddan/jsenLgre/

【讨论】：

【解决方案5】：

use
body{
    margin :0px;
}
and
.container {
    height: 100vh;
    border: 3px;
    box-sizing: border-box;
}

【讨论】：

【解决方案6】：

默认情况下，body 和 html 分配给 margin 或 padding 到某些像素。尝试使用以下代码。

1vh = 视口高度的 1% 100vh = 100% 的高度。

所以永远不要计算高度 - 3px。像这样

body,html {
    margin: 0;
    padding: 0;
}
* {
    box-sizing: border-box;
}

【讨论】：

就我而言，它没有帮助我。改回页脚中的默认字体确实修复了它......所以我在页脚中添加了height: 1.5rem，它完成了修复。我猜 vh/flex-grow 如何使用某些字体计算高度有一些优势

【解决方案7】：

问题是你有一个边框，就像填充一样，你必须将它添加到你的高度。

要么你用这个：

.container {
    height: calc(100vh - 3px);
}

或者这个：

.container {
    height: 100vh;
    border: 3px;
    box-sizing: border-box;
}

【讨论】：

哪一部分不是？
@VijayKumarB 他绝对是正确的。还要记住，body 可以有边距。
好的，所以你告诉我我不正确，因为你不这么认为？这并不是真正的思想开放。就我所见，你的答案和我的一样。谢谢@DanielZiegler，没想到！
@VijayKumarB 是的。 100vh 适合视口。但 100vh + 3px 边框高于整个视口。不知道该说些什么，因为您的回答表明您对盒子模型有所了解。但是你应该去再读一遍
@VijayKumarB 所以...看到了吗？这个答案是绝对正确的。我出去了：'D

【解决方案8】：

你可以通过overflow-y:hidden移除滚动条；你应该使用 calc 函数来删除你的标题高度示例高度：100vh;

calc(100vh -20px) 如果你的标题是 20px 高度。所以你得到100vh！

【讨论】：