Jul*_*ert 12 html css height layout
如果身体已min-height指定,我不会让我的第一个孩子身体达到100%身高.
<html>
<head>
<style>
html {
height:100%;
}
body {
min-height:100%;
}
#wrapper {
height:100%;
min-width:1120px; /* 250px each side (content width is 870px) */
max-width:2000px;
background-image:url(bg.png);
background-position:50% 25px;
background-repeat:no-repeat;
background-size:cover;
}
</style>
</head>
<body>
<div id="wrapper">
<!-- web content -->
</div>
</body>
</html>
这并不会调整包装器窗口的高度.当我删除min-并使用height它时,它会工作.但我必须有内容高度变量...
我确实在SO和谷歌上发现了一些其他帖子,但他们只是提问,没有解决方案.
kap*_*apa 22
使用百分比值时height,它将始终相对于height父元素的指定值.不是父元素的实际高度,而是heightCSS中指定的高度.
因此,当您的body元素没有height指定(仅min-height,但不计数)时,100%将无法生效.
一种可能的解决方案是使用position: absolute; top: 0; bottom: 0;你的#wrapper,你的div将被拉伸.这当然可能会产生一些你不想要的布局后果.
jos*_*ell 10
使用height:100vh;您要伸展和填充屏幕的div.
不要设置正文height: 100%;如果你的内容高度超过100%的页面会破坏整个网站.他们将无法滚动.
如果您希望网站的几页填满整个屏幕,同时仍然允许其他页面滚动(因为它们的内容高度超过100%),您需要将div高度设置为100%,而不是整个网站 - 宽身高.
使用此作为一般站点范围的CSS:
html {
height: 100%;
}
body {
min-height: 100%;
}
然后设置特定的div来填充整个屏幕(当内容的高度低于100%时):
/* Set any div heights to 100% of the screen height*/
.div {
height:100vh;
}
vh测量的说明:https://stackoverflow.com/a/16837667/4975772
我实际上找到了解决方案!
我现在有:
html, body {
height:100%;
}
所以我的身体不是min-height.我不记得为什么我把它改成了min-height,但我希望我不会面对前一段时间我明显面临的问题......
| 归档时间： |
|
| 查看次数： |
22752 次 |
| 最近记录： |