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填充父级[重复]的主要内容,如果未能解决你的问题,请参考以下文章

在 Android Studio 中找不到“填充父级”[重复]

将CSS不透明度应用于父级,而不是子级[重复]

CSS中的背景图像填充/填充[重复]

Sass指定父级[重复]

为啥不针对直接父级计算 div 边距 [重复]

如何使用css和javascript创建泪滴/水滴填充[重复]