如何防止CSS溢出？

Question

我在CSS中有这个代码：

#top_bar {
width: 100%;
padding: 10px;
border: 3px solid gray;
/*margin: 0px;*/
margin-left: auto;
margin-right: auto;
position: fixed;
bottom: 0px;
}

我遇到了溢出的问题，我看不到状态栏的结束（因为它不在页面上）。它没有显示滚动条（我不想要它），但是我希望它能够完全触及页面的末尾，而不是重复它。
它正在右侧。

Answer 1

取下填充物，此时宽度设定为100％+ 10px。然后，您可以将填充添加到#top_bar内的容器中，例如

#top_bar .inner {
  padding:10px;
}

<div id="top_bar">
  <div class="inner">
    ...Content...
  </div>
</div>

或者您也可以更改box-sizing以强制框模型在计算宽度时忽略填充：

#top_bar{
  box-sizing: border-box;
  width: 100%;
}