子元素撑满父元素

最新推荐文章于 2024-03-28 15:13:48 发布

原创最新推荐文章于 2024-03-28 15:13:48 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #css

css 专栏收录该内容

3 篇文章

订阅专栏

本文探讨了如何确保子元素在父元素高度不确定时使用height:100%正确布局，关键在于设置body和html的高度为100%，并举例了HTML结构和CSS应用。特别强调了min-height情况下高度不固定对子元素的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在给子元素设置height : 100%

时候前提是父盒子固定高或者百分比

父元素如果用min-height 这个属性的话,高度不确定,子元素height:100%,不会生效

注意 :

我们给父元素height:100%的时候发现不会撑满整个屏幕,原因是body,html,高度.

我们只要设置100%就解决了


body,html{
    height: 100%;
}
.father{
    width: 100%;
    height: 100%; //这里只能用固定百分比或者px值
    padding: 0 90px;
    box-sizing: border-box;
    background: red
}
.son{
    width: 100%;
    height: 100%;
    background: blue;
}
<div class="father">
    <div class="son"></div>
</div>

展示的效果如下 :