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

Answer 1

只需将容器变成伸缩容器，您将获得缩小效果，可以解决此问题。然后调整中间一个的边距以保持相同的间距，就像您使用边距折叠（flexbox禁用边距折叠）一样。

#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>

Answer 2

您可以使用display:flex。将display: flex; flex-direction: column;添加到父样式。

或者您可以使用calc来减少margin中的height-

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

Answer 3

在父元素上添加溢出属性。

  .container {
        overflow: hidden;
    }

查看有关以下内容的文档：CSS overflow property

Answer 4

这是因为A，B，C上有一个边距（因为m-2），并且3个div的全高为100％+ 4 * 8px，比容器的高度大。

因此，如果auto的容器高度不重要为400px，则必须更改其高度。（将为432像素。）

或

如果div和高度比之间的填充很重要，则必须删除m-2并将margin更改为padding: .5rem，并将box-sizing: border-box添加到A，B，C。

或

将overflow: hidden添加到容器中，这样最后的divs溢出将不可见，但是在那种情况下，#c { height: 50%}就不会成立。

Answer 5

由于每个子div下方的边距空间，div框不适合父div框。 divs下面的边距空间为8px。边距占用的总空间为32px，占总空间的8％。因此，您必须将每个子div的高度百分比降低8 / 3px，每个高度的2px左右，任何2个div的高度为1px。

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

5 个答案: