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

Question

Я установил ширину 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>

Answer 1

Уже ответили, но мне больше нравится это решение. Добавьте это к 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-size /

Edit - не работает на IE7, но не так много. Вот еще об этом: поддержка размеров коробки в IE7

Answer 2

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

#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>

Live Demo

• Удалить width: 100%.
• Чтобы заполнить экран div, добавьте right: 0.

Совершенно жизнеспособно дать элементу left и right (или top и bottom), как мы делаем здесь.

Answer 3

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