html - CSS填充父级
问题描述
我希望蓝色 div 不会溢出红色 div,但总是填充父级。我检查了 stackoverflow,他们建议使用 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>
解决方案
您可以使用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;
}
推荐阅读
- python - TensorFlow 神经网络作为 API?
- reactjs - 使用 [key:string]: any 来避免需要额外的泛型函数?
- android - 支持的最低 gradle 版本为 4.4。当前版本是 4.1
- azure - 在操作级别停止全局级别的策略执行
- java - 如何在 Spring Boot 中为只有外键的表映射/创建实体类
- html - Flexbox 无法移动内容
- javascript - 使用 JavaScript 创建上一个和下一个按钮
- cassandra - No-SQL (Cassandra) data modelling of user data
- python - 运行函数 PyQt 后如何从一个主窗口获取信息到另一个主窗口?
- linux - Qt desinger generate empty ui file