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

我希望内容采取的浏览器窗口的全高度，但不超过。

当使用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>
<body>
<div class="container">
<div class="page_content">
...
</div>
<div class="footer">
...
</div>
</div>
</body>
</html>
105204 次浏览
小开

问题是，你有一个边框与它，和填充，你必须添加到您的高度。

要么你用这个:

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

或者这样:

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

您可以删除滚动条的溢出-y: 隐藏，您应该使用 calc 函数删除您的标题高度示例高度: 100vh;

如果你的页眉高度是20px，那么你得到的是100vh-20px！

小开

默认情况下，body和 html被分配给 margin或 padding，分配给某些像素。

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

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

body,html {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
小开 
use
body{
margin :0px;
}
and
.container {
height: 100vh;
border: 3px;
box-sizing: border-box;
}
小开 
body {
margin: 0;
}


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

这个方法奏效了。看看这里，测试一下: https://jsfiddle.net/ddan/jsenLgre/

小开

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

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

}

小开

有一个用户代理样式表被添加到任何 Web 文档中，它只是每个浏览器应用于被查看文档的默认样式集，然而这些规则的优先级非常低。 当然，作者可以超越这些规则，而且这种情况经常发生。

截至今天，谷歌铬，添加8像素的边缘到您的文件，如果没有添加或超过书面的作者。

因此，让我们假设您在整个 HTML 文档中添加了一个 div，在您的示例中称为. Container。 你可以试试这样做。

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，它们将利用。容器类100vh 值。您可以将70% 的高度分配给。页面内容和30% 的高度。页脚 div。

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

我经常遇到这个问题，我的解决方案有点不合常规，但是这就是了

 body{
height: 80vh;
}

提交答案