如何防止填充超出我的 DIV 宽度？

Question

我有两个 DIV，我想将它们垂直堆叠......

<div id="searchContainer”>…</div>
<div id="searchResultsContainer”>…</div>

我为它们分配了以下样式……

#searchContainer {
  padding: 10px;
  font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  background-color: tan;
  width: 100%;
}

#searchResultsContainer {
  background-color:cyan;
  font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  padding: 5px 0px 5px 0px;
  width: 100%;
}

然而，似乎在我的顶部 DIV 添加填充会导致它比它下面的 DIV 更宽。我希望两个 DIV 的宽度相同，但我希望顶部的 DIV 有填充，这样元素就不会挤到边框。我怎么做？这是说明我的问题的 Fiddle — https://jsfiddle.net/1zb5mqmo/ .

Answer 1

在填充的 div 上使用 box-sizing: border-box;:

#searchContainer {
    padding: 10px;
    font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
    background-color: tan;
    /* max-width: 1000px; */
    width: 100%;
    box-sizing: border-box;
}

box-sizing: border-box 宽度和高度属性包括内容填充和边框

box-sizing: content-box宽高属性只包含内容

已更新JSFiddle

Answer 2

在这种情况下，只需删除宽度，就可以将内边距和边框结合起来，而不会丢掉它

#searchContainer {
  padding: 10px;
  font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  background-color: tan;
}

#searchResultsContainer {
  background-color:cyan;
  font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  padding: 5px 0px 5px 0px;
  border: 5px solid steelblue
}

<div id="searchContainer">...</div>
<div id="searchResultsContainer">...</div>

如何防止填充超出我的 DIV 宽度？

How do I prevent padding from throwing off my DIV widths?

html

css

padding

width