如何在CSS中防止边距溢出？

Question

在下面的代码中，我注意到最后一行溢出了父容器。我尝试使用overflow: auto;，但这会添加滚动条。我该如何避免溢出？

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">

<style>
    #a { height: 33%}
    #b { height: 17%}
    #c { height: 50%}
</style>
<div class="container border border-warning" style="height: 400px">
  <div id="a" class="row bg-primary m-2">A</div>
  <div id="b" class="row bg-secondary m-2">B</div>
  <div id="c" class="row bg-info m-2">C</div>
 </div>

https://codepen.io/anon/pen/PBLyZB

- nowox

---

你尝试过使用 .container{ overflow: hidden; } 吗？ - toffler

在父元素.container上使用overflow: hidden就能解决问题，或者更好的做法是确保每一行的height + margin之和不超过100%...例如：height: calc(33% - 16px)。 - giorgio

继@giorgio所说的，对于您来说，代码应该是这样的：#a { height: calc(33% - 1rem) }，因为.m-2类在元素顶部和底部各增加了0.5rem，所以您需要减去总共1rem。 - zgood

@zgood 不好，因为存在边距折叠问题。每个元素之间只有0.5rem的边距，所以容器中的总边距是2rem而不是3rem。 - Temani Afif

@TemaniAfif 噢，我明白了...你是对的。它必须像这样 #a { height: calc(33% - 1rem)} #b { height: 17%} #c { height: calc(50% - 1rem)} 这似乎很别扭，而且不太灵活。 - zgood

Answer 1

只需将容器设置为flex容器，即可获得收缩效果，这将解决问题。然后调整中间那个元素的边距，以保持与margin-collapsing相同的间距（flexbox禁用margin-collapsing）。

#a { height: 33%}
#b { height: 17%}
#c { height: 50%}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container border border-warning d-flex flex-column" style="height: 400px">
  <div id="a" class="row bg-primary m-2">A</div>
  <div id="b" class="row bg-secondary mx-2">B</div><!-- margin only on the left and right -->
  <div id="c" class="row bg-info m-2">C</div>
</div>

- Temani Afif

Answer 2

你可以使用 display:flex。将 display: flex; flex-direction: column; 添加到父元素样式中。

或者你可以使用 calc 来减少从 height 中的 margin。

#a { height: calc(33% - 0.5rem) }
#b { height: calc(17% - 0.5rem) }
#c { height: calc(50% - 0.5rem) }

- Programmer

---

这里的计算有点棘手，因为存在边距折叠问题，实际上你缺少一个边距...最初它们是6个，其中4个会折叠，所以最终你会有4个边距，你需要移除所有的边距，否则最后一个元素会靠近边缘。 - Temani Afif

Answer 3

在父元素上添加overflow属性。

  .container {
        overflow: hidden;
    }

请查看文档：CSS overflow 属性

- Dax

Answer 4

这是因为A、B、C三个元素有margin（m-2的缘故），而三个div的总高度为100% + 4*8px，超过了容器的高度。

所以如果容器高度不重要，你可以将其高度改为auto（高度将为432px，而非400px）。

或者

如果间距和高度比例很重要，你需要移除m-2，将margin改为padding: .5rem并在A、B、C上添加box-sizing: border-box。

或者

在容器上添加overflow: hidden，这样最后一个div就不会显示溢出内容，但此时#c { height: 50%}也将不再成立。

- hansolo

---

你的第一个和最后一个解决方案都不是真正的解决方案，因为它们没有给出期望的结果。然而第二个解决方案可能可行。虽然我会使用p-2类和box-sizing: border-box;的解决方案，而不是重写CSS。这样做会让它们“接触”在一起。 - Thomas Scheffer

Answer 5

#a { height: 33%}
#b { height: 17%}
#c { height: 50%}
    

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">

<div class="container d-flex flex-column p-2 border border-warning " style="height: 400px;">
  <div id="a" class="row bg-primary mx-2">A</div>
  <div id="b" class="row bg-secondary m-2">B</div>
  <div id="c" class="row bg-info mx-2">C</div>
</div>

- Dream Castle

---

您的回答可以通过添加更多支持性信息来改进。请[编辑]以添加进一步细节，例如引用或文档，以便其他人可以确认您的答案是否正确。您可以在帮助中心中找到有关编写良好答案的更多信息。 - Ethan

Answer 6

盒子不能适应父盒子，因为每个子盒子下面有边距空间。盒子下面的边距空间为8px。边距占用的总空间为32px，即总空间的8%。因此，您必须将每个子盒子的百分比高度减少8/3px，即每个盒子减少约2px，其中任意2个盒子减少1px。

- Animan