关于给html,body设置高度100%的使用情况
程序员文章站
2024-03-26 13:16:23
...
关于给html,body设置高度100%的使用情况
一般情况下,如果块级元素没有设置宽度和高度,则有内容撑开。
参考父元素设置百分比时,如果父元素也没有高度则设置失败。
如果一个div的父元素为body,并设置子绝父相的情况。
<style>
body {
position: relative;
}
.box {
position: absolute;
bottom: 0;
width: 800px;
background-color: plum;
}
</style>
</head>
<body>
<div class="box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam voluptas ipsum esse vero corrupti quasi illum
tenetur cumque ratione minus natus, impedit dolor quas at ipsa nostrum, veritatis, ab voluptate.
</div>
结果
所以我们要给html和body设置
html,
body {
height: 100%;
}
html参考的是浏览器,才能得到相应的结果
推荐阅读
-
关于给html,body设置高度100%的使用情况
-
IE下table设置高度100%却无效的情况_html/css_WEB-ITnose
-
html和body的高度100%引发的问题_html/css_WEB-ITnose
-
关于div设置最小高度,超过后自动增加的css,兼容IE和火狐_html/css_WEB-ITnose
-
html和body的高度100%引发的问题_html/css_WEB-ITnose
-
css中关于Div的宽度与高度的100%设定_html/css_WEB-ITnose
-
IE下table设置高度100%却无效的情况_html/css_WEB-ITnose
-
关于div设置最小高度,超过后自动增加的css,兼容IE和火狐_html/css_WEB-ITnose
-
关于浏览器window、document、html、body高度的探究_html/css_WEB-ITnose
-
关于浏览器window、document、html、body高度的探究_html/css_WEB-ITnose