div用百分比设置高度无效

最新推荐文章于 2024-06-21 13:41:59 发布

原创最新推荐文章于 2024-06-21 13:41:59 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

h5+css3 专栏收录该内容

8 篇文章

订阅专栏

当在CSS中尝试用百分比设置div的高度时，若body没有设定高度，会导致设置无效，因为高度依赖于父元素。然而，使用绝对单位如px可以正常工作。这个现象在前端开发中是个常见问题，尤其是在布局设计时需要注意。

div用百分比设置高度无效

原因：当body里没有设置高度时，直接用百分比设置div的高度是无效的，只能依靠div自身的内容撑开。但是，在这时用绝对值单位（px）设置div的高度是有效的。
下面展示一些 内联代码片。

 body {
            font-size: 30px;
            /* 设置body占满视口区，vh为视口区的单位*/
            height: 100vh;
        }

        div {
            width: 50%;
            /* body里面没有高度，靠内容撑开，用百分比设置高度无效 */
            height: 50%;
            }