Question

我希望内容能够占据浏览器窗口的全部高度，但不能超越。

当使用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>

Answer 1

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

1vh = veiwport高度的1％ 100vh = 100％的高度。

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

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

Answer 2

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

要么使用它：

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

或者这个：

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

Answer 3

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

Answer 4

body {
  margin: 0;
}

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

这就是诀窍。请在此处查看并测试：https://jsfiddle.net/ddan/jsenLgre/

Answer 5

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

react-native

}

Answer 6

有一个用户代理样式表已添加到任何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值。您可以将.page-content的高度设置为70％，将.footer div的高度设置为30％。

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

Answer 7

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

计算（100vh -20px），如果你的标题是20px高度。所以你得到100vh！

当容器使用“height：100vh”时，会出现垂直滚动条

7 个答案: