Проблема HTML-элемента шириной 100%

Question

При назначении некоторым элементам HTML (например, вводу формы) 100% ширины - вы больше не можете применять дополнительные стили, которые могут повлиять на ширину.Такие вещи, как border или padding приведут к превышению элемента на 100%.Это приводит к неловким элементам, которые могут находиться за пределами своих родительских элементов.

Поскольку CSS не поддерживает width: 100% - 2px; Единственный способ, который я знаю об этом, - это использовать абсолютную ширину пикселя (width: 98px) или отключить элемент на 100%, что на самом деле не вариант.1007 *

<div style="overflow:hidden;">
<input style="width:100%; border: 1px solid #000;" />
</div>

Есть ли другие способы обойти это?

Answer 1

Наряду с добавлением еще одного div , решение в ближайшее время будет использовать CSS 3 для добавления атрибута box-sizing в правила CSS. Это новое значение CSS 3 уже работает в IE 8 и во всех других браузерах - так что, если вы не против пропустить IE 6 и 7, вы можете использовать его сейчас!

textarea {
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
}

Answer 2

Вы можете сделать контейнер на 100% без хрома (границы, отступы), а затем поместить внутри него элемент блока с любым желаемым хромом - элемент блока по умолчанию заполнит общую ширину.

<style>
.container {width:100%;border:0:margin:0;}
.thingy {border:1px solid black;margin:2px;background:#ddd;}
</style>

<div class="container">
  <div class="thingy">
    Both worlds?
  </div>
</div>

Answer 3

Это старый вопрос, но стоит упомянуть, что начиная с CSS3, вы можете использовать calc:

width: calc(100% - 2px);