Установить ширину CSS до 100% + правая граница отсутствует?

Я устанавливаю ширину div в 100% окна. Когда я применяю границу к этому div, правая граница обрезается. Должен ли я выполнять ручную работу с коробкой?

#textBoxContainer {
  width:100%;
  height:30%;
  position:fixed;
  z-index:99;
  bottom:0px;
  left:0px;
  background-color:#999;
  border: 4px solid #000;
}

<div id="textBoxContainer"></div>

Ответ 1

Самое простое исправление в вашем случае:

#textBoxContainer {
    height: 30%;
    position: fixed;
    z-index: 99;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #999;
    border: 4px solid #000;
}

<div id="textBoxContainer"></div>

Ответ 2

Уже был дан ответ, но мне нравится это решение лучше. Добавьте это в textBoxContainer:

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

Он поместит границу внутри коробки. Дополнительная информация: http://css-tricks.com/box-sizing/

Изменить - не работает на IE7, но не так много. Подробнее об этом: поддержка размера окна в IE7

Ответ 3

Немного связанная ошибка firefox
В раскрывающемся списке 100% выберите частоту своей правой границы (в зависимости от ширины окна)
https://bugzilla.mozilla.org/show_bug.cgi?id=924068
Нет обходного пути, кроме того, чтобы попробовать ширину: 99%