程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

防止填充导致元素溢出其父元素

发布于2021-03-23 01:25     阅读(1104)     评论(0)     点赞(12)     收藏(0)


这是我的HTML结构:

.parent{
  background-color:#f7f7f7;
  width: 100px;
  height: 100px;
  border:2px solid;
}

.child{
  height: 100%;
  width: 100%;
  background-color:#cf5;
  padding: 15px;
}
<div class="parent">
  <div class="child">something</div>
</div>

正如你看到的div.child超出div.parent那是因为padding: 15px;好吧,我该如何在CSS中进行计算:

.child{
    height: (100% - the number of padding);
    width: (100% - the number of padding);
}

因此,这是预期的结果:(请注意也应该有padding: 15px

在此处输入图片说明


解决方案


只需添加box-sizing: border-box到子元素。

.parent {
  background-color: #f7f7f7;
  width: 100px;
  height: 100px;
  border: 2px solid;
}
.child {
  height: 100%;
  width: 100%;
  background-color: #cf5;
  padding: 15px;
  box-sizing: border-box; /* NEW */
}
<div class="parent">
  <div class="child">something</div>
</div>

CSSbox-sizing属性为初始值content-box这意味着盒子模型通过添加内容加上填充加上边框来计算总宽度高度的计算类似。

使用时border-box,框模型在width/height计算中包括填充和边框

(请注意,边距始终在计算之外;无论在content-box还是中,都将附加它们border-box。)


第二种可能性(可能比效率低box-sizing)是CSScalc函数

.parent {
  background-color: #f7f7f7;
  width: 100px;
  height: 100px;
  border: 2px solid;
}
.child {
  height: calc(100% - 30px);  /* NEW */
  width: calc(100% - 30px);   /* NEW */
  background-color: #cf5;
  padding: 15px;
}
<div class="parent">
  <div class="child">something</div>
</div>




所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/41799/39e7b5507eb17560b7f1/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

12 0
收藏该文
已收藏

评论内容:(最多支持255个字符)