如果页面滚动，使 html 和 body 拉伸到 100% 的高度甚至更多
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14151663/
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
Making html and body stretch to 100% height and more if the page scrolls
提问by James Dawson
I want to make my <html>and <body>tags be the entire height of the viewport if the page isn't tall enough to warrant scrolling, or the entire height of the web page if it does.
如果页面不够高而不能保证滚动，我想让 my<html>和<body>tags 成为视口的整个高度，或者如果滚动则是网页的整个高度。
At the moment I'm using this CSS:
目前我正在使用这个 CSS：
html, body {
height: 100%;
}
Which works a treat if the web page isn't tall enough for the user to scroll, however on a long webpage it only goes to the height of the viewport on the users browser. I also tried:
如果网页的高度不足以让用户滚动，这将是一种享受，但是在长网页上，它只会到达用户浏览器视口的高度。我也试过：
html, body {
min-height: 100%;
}
but that just seems to have the same effect as having no heightdeclaration at all.
但这似乎与根本没有height声明具有相同的效果。
回答by user3276552
It sounds like your goal is for the body to
听起来你的目标是让身体
- always cover the screen (with minimal or no content)
- be able to stretch (if there is a ton of content)
- 始终覆盖屏幕（内容最少或没有内容）
- 能够拉伸（如果有大量内容）
if that's the case the following snippet should help
如果是这种情况，以下代码段应该会有所帮助
/* this looks like it should work
html, body{
min-height: 100%;
}
but this ↓ does the trick */
html, body{
padding: 0;
margin: 0;
}
html{
height: 100%;
}
body{
min-height: 100%;
}
回答by r3plica
Have you tried:
你有没有尝试过：
min-height: 100vh;
That should set the height of the elements to the viewport and if they go beyond, it will have a scrollbar, here is an example:
这应该将元素的高度设置为视口，如果超出，它将有一个滚动条，这是一个示例：
回答by ashwini
html, body {
height: 100%;
}
div {
min-height: 100%;
}
This is the solution for Making html and body stretch to 100% height and more if the page scrolls
如果页面滚动，这是使 html 和 body 拉伸到 100% 高度的解决方案
回答by 7zark7
A starting point:
一个起点：
body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}
(or add a container div with an ID, etc if you have issues with some browsers.)
（或者如果您对某些浏览器有问题，请添加带有 ID 的容器 div 等。）
EDIT: Adding full code example below:
编辑：在下面添加完整的代码示例：
<body>
<aside>Sidebar</aside>
<div id="main">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
CSS:
CSS：
* {
font-size: 2em
}
aside {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 200px;
background-color: pink;
}
#main {
position: absolute;
top: 0;
left: 200px;
right: 0;
bottom: 0;
overflow: auto;
background-color: red;
}
回答by Dhruvam Gupta
html
{
height: 100%;
}
body
{
max-height: 100%;
}
using max-height in body element will wrap the content within the viewable size of page and remove the scrolling or extra whitespace.
在 body 元素中使用 max-height 会将内容包裹在页面的可见大小内，并删除滚动或额外的空白。
回答by ATOzTOA
You will need to specify the overflowattribute for the particular div. It will make sure your content is shown even when page is scrolled or content is more.
您需要overflow为特定的 div指定属性。即使页面滚动或内容更多，它也会确保显示您的内容。
div {
overflow:scroll;
}
