Ширина: 100% -покрытие?

Ответ 1

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

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

Вот демо: http://jsfiddle.net/thirtydot/QkmSk/301/

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

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

Ответ 2

Вот почему мы box-sizing в CSS.

Ive отредактировал ваш пример, и теперь он работает в 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, проверьте другие ответы.

Ответ 3

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

padding: 5%;
width: 90%;

Ответ 4

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

Демо на jsFiddle:

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

Разметка HTML:

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

CSS

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

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

Ответ 5

Используйте css calc()

Супер просто и круто.

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

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

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

Ответ 6

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

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

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

Приветствия

Andy

Ответ 7

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

Живой пример

Ответ 8

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

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

Ответ 9

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

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

Ответ 10

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

Ответ 11

Как обернуть его в контейнер. Контейнер shoud имеет стиль вроде:

{
    width:100%;
    border: 10px solid transparent;
}

Ответ 12

У меня была такая же проблема. Исправьте его так:

width: 100%;
padding: 5px;
/*--------------Now remove from padding what you've added---------------*/
margin:-5px;

Приветствия

Ответ 13

Попробуйте следующее:

width: 100%;
box-sizing: border-box;

Ответ 14

Для меня, используя margin:15px;padding:10px 0 15px 23px;width:100%, результат был такой:

Для меня было решение использовать width:auto вместо width:100%. Мой новый код был:

margin:15px;padding:10px 0 15px 23px;width:auto. Тогда элемент выровнен правильно:

Ответ 15

Вы можете сделать это:

width: auto;
padding: 20px;