如果页面滚动，使html和body伸展到100％高度和更多
[英]Making html and body stretch to 100% height and more if the page scrolls
问题描述
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. 
我想让我的<html>和<body>标签成为视口的整个高度，如果页面不够高，不能保证滚动，或者如果网页的整个高度不高。
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 height declaration at all. 但这似乎与没有height声明具有相同的效果。
6 个解决方案
解决方案1
13 2015-09-03 20:10:44
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%;
}
解决方案2
6 2017-03-16 15:28:39
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: 这应该将元素的高度设置为视口，如果它们超出，它将有一个滚动条，这是一个例子：
http://codepen.io/r3plica/pen/jBaPYB http://codepen.io/r3plica/pen/jBaPYB
解决方案3
1 2013-01-04 05:41:53
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;
}
解决方案4
1 2017-05-03 09:54:58
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％高度的解决方案
解决方案5
0 2016-02-03 13:36:29
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会将内容包装在可查看的页面大小内，并删除滚动或额外的空格。
解决方案6
-1 2013-01-04 05:43:28
You will need to specify the overflow attribute for the particular div. 您需要为特定div指定overflow属性。 It will make sure your content is shown even when page is scrolled or content is more. 即使页面滚动或内容较多，也会确保显示您的内容。
div {
overflow:scroll;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.