ширина: 100% -пополнение?

Question

У меня есть html-ввод.

На входе есть padding: 5px 10px; Я хочу, чтобы он составлял 100% от ширины родительского div (который является текучим).

Однако с использованием width: 100%;вызывает ввод 100% + 20px как я могу обойти это?

Пример

Answer 1

box-sizing: border-box - это быстрый и простой способ исправить это:

Этот будет работать во всех современных браузерах и IE8 +.

Вот демонстрация: http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

Версии с префиксом браузера (-webkit-box-sizing и т. Д.) Не требуются в современных браузерах.

Answer 2

Вот почему у нас box-sizing в CSS.

Я отредактировал ваш пример, и теперь он работает в Safari, Chrome, Firefox и Opera. Проверьте это: http://jsfiddle.net/mathias/Bupr3/ Все, что я добавил, было так:

input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

К сожалению, старые браузеры, такие как IE7, не поддерживают это. Если вы ищете решение, которое работает в старых IE, ознакомьтесь с другими ответами.

Answer 3

Используйте также отступы в процентах и ​​удалите из ширины:

padding: 5%;
width: 90%;

Answer 4

Вы можете сделать это без использования box-sizing и непонятных решений, таких как width~=99%.

Демонстрация на jsFiddle :

• Сохранить входные данные padding и border
• Добавить к входу отрицательный горизонтальный margin = border-width + horizontal padding
• Добавить к обертке ввода по горизонтали padding равно margin с предыдущего шага

HTML-разметка:

<div class="input_wrap">
    <input type="text" />
</div>

CSS:

div {
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's width */ 
    padding: 5px 10px;
    border: none;
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}

Answer 5

Использовать css calc ()

Супер просто и потрясающе.

input {
width: -moz-calc(100% - 15px);
width: -webkit-calc(100% - 15px);
width: calc(100% - 15px);
}​

Как видно здесь: Ширина деления 100% минус фиксированное количество пикселей
По вебвиталиям (https://stackoverflow.com/users/713523/webvitaly)
Оригинальный источник: http://web -profile.com.ua / css / dev / css-width-100prc-minus-100px /

Просто скопировал это сюда, потому что я почти пропустил это в другой теме.

Answer 6

Если я нахожусь в контейнере с отступом 15 пикселей, это то, что я всегда использую для внутренней части:

width:auto;
right:15px;
left:15px;

Это растянет внутреннюю часть до любой ширины, которая должна быть меньше 15 пикселейсторона.

Приветствия

Энди

Answer 7

Вы можете попробовать некоторые приемы позиционирования. Вы можете поместить вход в div с position: relative и фиксированной высотой, затем на входе есть position: absolute; left: 0; right: 0; и любой отступ, который вам нравится.

Живой пример

Answer 8

Вот рекомендация от codeontrack.com , которая имеет хорошие примеры решения:

Вместо того, чтобы устанавливать ширину div в 100%, установите его на autoи убедитесь, что для <div> установлено отображение: блок (по умолчанию <div>).

Answer 9

Переместите отступ поля ввода в элемент-обертку.

<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>

<div class="outer">
    <div class="inner">
       <input/>
    </div>
</div>

См. Пример здесь: http://jsfiddle.net/L7wYD/1/

Answer 10

Просто поймите разницу между шириной: авто;и ширина: 100%;Ширина: авто;(АВТО) МАТИЧЕСКИ вычислит ширину, чтобы соответствовать точному заданному с div обтекания, включая отступ.Ширина на 100% увеличивает ширину и добавляет отступы.