我想让我的<html>和<body>标签成为视口的整个高度,如果页面不够高,无法保证滚动,或者如果网页的整个高度都不高.
目前我正在使用这个CSS:
html, body {
height: 100%;
}
如果网页不够高,用户无法滚动,那么这会很有效,但是在长网页上,它只会到达用户浏览器上视口的高度.我也尝试过:
html, body {
min-height: 100%;
}
但这似乎与没有height声明的效果相同.
use*_*552 13
听起来你的目标是身体
如果是这种情况,以下代码片段应该有所帮助
/* 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%;
}
你有没有尝试过:
min-height: 100vh;
这应该将元素的高度设置为视口,如果它们超出,它将有一个滚动条,这是一个例子:
http://codepen.io/r3plica/pen/jBaPYB
一个起点：
body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}
（或者如果您在使用某些浏览器时遇到问题，请添加带有 ID 的容器 div 等。）
编辑：添加下面的完整代码示例：
<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：
* {
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;
}