web 页面在多种分辨率下占据 100% 屏幕的最佳方式
[英]Best way for a web page to occupy 100% of screen across multiple resolutions
问题描述
I have a page that I want to occupy 100% of the screen.
我有一个页面，我想占据 100% 的屏幕。 I have tried a few methods but I always get a vertical scrollbar for some screen resolutions.我尝试了一些方法，但对于某些屏幕分辨率，我总是得到一个垂直滚动条。 In Chrome 100vh always leaves a scrollbar.在 Chrome 100vh 中总是留下一个滚动条。 I have to bring it down to 97vh before it disappears.我必须在它消失之前把它降到 97vh。 I thought about a JavaScript solution but I would like to keep it all css if possible.我考虑过 JavaScript 解决方案，但如果可能的话，我想保留所有 css。
<html>
<body>
<div style="height:100vh;border:solid 1px green;">
<h1>HI</h1>
</div>
</body>
</html>
2 个解决方案
解决方案1
2 2020-06-08 16:59:48
if you want to hide the scrollbar then you can try the following code in CSS styling-如果你想隐藏滚动条，那么你可以在 CSS 样式中尝试以下代码 -
body::webkit-scrollbar{display:none;}
but if you want no scrolling such that only this would be 100% occupying the page such that there would be no further scrolling then specify the following in CSS code-但是如果您不希望滚动，只有这将 100% 占用页面，这样就不会进一步滚动，然后在 CSS 代码中指定以下内容 -
body {
overflow: hidden;
}
解决方案2
0 2020-06-08 16:52:46
Add this in your css, body::webkit-scrollbar{display:none;}.将此添加到您的 css，body::webkit-scrollbar{display:none;}。 This way the scrollbar will be hidden but you can still scroll这样滚动条将被隐藏，但您仍然可以滚动
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.