Как предотвратить переполнение в 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%;
}