锋言锋语

NferZhuang的自留地

子元素margin导致父元素计算高度失败

问题描述

有下述html代码:

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

和css属性:

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: brown;
}

.parent {
  margin-left: 300px;
  background-color: #24f1f1;
}

.parent .child {
  margin: 20px auto;
  height: 300px;
  background-color: cadetblue;
}

 

理论上计算父元素.parent的高度应该是:300*3+20+20*2+20=980,可是实际获取的高度却是:

$(".parent").height()
940

解决方案

根据链接有三种方法可以解决:

  • 设置overflow: hidden或overflow: auto给父元素
.parent {
  margin-left: 300px;
  background-color: #24f1f1;
  overflow: hidden;
}
  • 使用padding和margin配合
.parent {
  margin-left: 300px;
  background-color: #24f1f1;
  padding-top: 1em;
  margin-top: -1em;
  padding-bottom: 1em;
  margin-bottom: -1em;
}

注:此处并不是只能设置为1em和-1em,只要margin和padding的值对应即可。

  • 只使用padding(hack方法)
.parent {
  margin-left: 300px;
  background-color: #24f1f1;
  padding-top: 0.02px;
  padding-bottom: 0.02px;
}

注:实际获取的高度并不是严格的980,而是979.99125

以上三种方法,推荐第一种,简单直观。上述完整代码和效果详见codepen

参考资料

文 / nfer
LEAVE A REPLY

loading