问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

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

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

原文由 cookya 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译css
阅读 1.8k
1 个回答
得票最新
社区维基
1

By default body and html are assigned to margin or padding to some pixels.尝试使用以下代码。

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

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

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

原文由 Mr.Pandya 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题