如何防止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

Answer 1

只需將容器設置為 flex 容器，您將獲得可以解決問題的收縮效果。 然后調整中間的邊距以保持與margin-collapsing (flexbox disable 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>

Answer 2

您可以使用display:flex 。 添加display: flex; flex-direction: column; 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) }

Answer 3

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

  .container {
        overflow: hidden;
    }

檢查文檔： CSS 溢出屬性

Answer 4

是因為A,B,C上有邊距（因為m-2），3個div的全高是100% + 4*8px，超過了容器的高度。

因此，如果 400px 不重要，則必須將容器的高度更改為auto 。 （這將是 432 像素。）

或者

如果 div 和高度比之間的填充很重要，則必須刪除 m-2 並將margin更改為padding: .5rem並將box-sizing: border-box添加到 A,B,C 。

或者

將overflow: hidden添加到容器中，因此最后一個 div 溢出將不可見，但在這種情況下#c { height: 50%}不會是真的。

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>

Answer 6

由於每個子 div 下方的邊距空間，div 框不適合父 div 框。 div 下方的邊距空間為 8px。 邊距占用的總空間為 32px，占總空間的 8%。 因此，您必須將每個子 div 的百分比高度減少 8/3px，即每個子 div 大約 2px，任何 2 個 div 大約 1px。