Как сделать ширину элемента: 100% минус отступ?

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

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

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

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

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

Вот почему у нас есть 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, ознакомьтесь с другими ответами.

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

padding: 5%;
width: 90%;

Вы можете сделать это без использования 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 */ 
}

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

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

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

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

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

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

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

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

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

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

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

Живой пример

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

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

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

А как насчет упаковки в контейнер. Контейнер должен иметь такой стиль:

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

Попробуй это:

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

Возможно, браузеры изменились с тех пор, как последний раз был дан ответ на этот вопрос, но это единственное, что у меня когда-либо надежно работало для этого:

    width: auto;
    left: 0;
    right: 0;

Затем вы можете сделать поля / отступы такими, какие захотите, и элемент не будет расширяться за пределы своей доступной ширины.

Это похоже на ответ @andology из прошлого, но если вы сделаете left / right как 0, вы можете сделать margin и / или padding все, что захотите. Так что это всегда по умолчанию div.

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

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

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

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

width: auto;
padding: 20px;