Html 如何在不滚动的情况下使网页完全适合屏幕尺寸？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41274876/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to fit the webpage exactly the screen size without scrolling?
提问by Naveen Kumar
I am new to css and I am finding some difficulty in setting my webpage to fit exactly the screen size but it doesn't fit and a scroll bar occurs. I have tried all the ways mentioned hereBut none of them works. My web page looks more or less like this. When i used
我是 css 新手，我发现在设置我的网页以完全适合屏幕尺寸时遇到一些困难，但它不适合并且出现滚动条。我已经尝试了这里提到的所有方法，但没有一个有效。我的网页看起来或多或少是这样的。当我使用
html{
height: 100vh;
}
body{
width: 100%;
height: 100vh;
background-color: #ffffff;
font-family: gothambook;
position: fixed;
top: 0;
bottom: 0;
}
The scroll bar didn't occur but the content went below the screen and was not visible
滚动条没有出现但内容低于屏幕并且不可见
回答by Gene
html {}
body {
height: 95vh;
}
vh stands for View Height and so 97vh is 97% the View/Browser's height.
vh 代表视图高度，因此 97vh 是视图/浏览器高度的 97%。
https://css-tricks.com/fun-viewport-units/
https://css-tricks.com/fun-viewport-units/
For some reason 100vh makes it scroll a little.
出于某种原因，100vh 使它滚动了一点。
回答by parag patel
height: 100vh is not good idea to give it full screen.
高度：100vh 不是给它全屏的好主意。
Try min-height: 100%
尝试 min-height: 100%
回答by AntK
If you want to completely disable the scroll then you can replace your styles with only this
如果你想完全禁用滚动，那么你可以只用这个替换你的样式
html {
overflow: hidden;
}
回答by Wild Beard
You're almost there. Target both htmland bodyand set both their widthand heightto 100%.
您快到了。以html和为目标，body并将它们的width和都设置height为100%。
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
body {
background: red;
}