CSS填充父级[重复]
Posted
技术标签:
【中文标题】CSS填充父级[重复]【英文标题】:Css fill parent [duplicate] 【发布时间】:2019-11-14 03:48:15 【问题描述】:我希望蓝色 div 不会溢出红色 div,但总是填充父级。我检查了 ***,他们建议使用 height:100% 但由于孩子有填充,它会溢出。如何在不改变父类样式的情况下做到这一点?
.parent
background: red;
height: 150px;
width:300px;
.child
height: 100%;
padding:20px;
width:100px;
background: blue;
<div class='parent'>
<div class='child'>
</div>
</div>
【问题讨论】:
【参考方案1】:添加box-sizing: border-box;
more info
*
box-sizing: border-box;
*
box-sizing: border-box;
.parent
background: red;
height: 150px;
width:300px;
.child
height: 100%;
padding:20px;
width:100px;
background: blue;
<div class='parent'>
<div class='child'>
</div>
</div>
【讨论】:
【参考方案2】:你可以使用box-sizing: border-box;
或者你可以像height: calc(100% - 40px */ Your padding */
这样计算孩子的身高
解决方案1
*
box-sizing: border-box;
.parent
background: red;
height: 150px;
width: 300px;
.child
height: 100%;
padding: 20px;
width: 100px;
background: blue;
解决方案2
.parent
background: red;
height: 150px;
width: 300px;
.child
height: calc(100% - 40px);
padding: 20px;
width: 100px;
background: blue;
【讨论】:
以上是关于CSS填充父级[重复]的主要内容,如果未能解决你的问题,请参考以下文章