Як зробити ширину елемента: 100% мінус прокладки?

У мене є HTML введення.

Вхідне повідомлення: padding: 5px 10px;Я хочу, щоб це було 100% ширини батьківського діва (що є рідиною).

Однак використання width: 100%;причини спричинює вхід, 100% + 20pxяк я можу це обійти?

Приклад

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, це не підтримують. Якщо ви шукаєте рішення, яке працює у старих ІЕ, перегляньте інші відповіді.

Використовуйте прокладки в відсотках і вийміть із ширини:

підкладка: 5%;
ширина: 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 -ширина-100пр-мінус-100px /

Просто скопіював це сюди, бо я майже не пропустив його в іншій темі.

Якщо припустити, що я в контейнері з накладкою 15 пікселів, це те, що я завжди використовую для внутрішньої частини:

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

Це розтягне внутрішню частину до будь-якої ширини, вона повинна бути меншою на 15 пікселів в обидві сторони.

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

Живий приклад

Ось рекомендація від codeontrack.com , яка має хороші приклади рішення:

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

Перемістіть вкладку "вкладки" на елемент обгортки.

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

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

А як із загортанням його в контейнер. У контейнера повинні бути такі стилі:

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

Спробуйте це:

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

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

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

margin:15px;padding:10px 0 15px 23px;width:auto. Потім елемент вирівнюється належним чином:

У мене було те саме питання. Виправте це так:

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

Ви можете зробити це:

width: auto;
padding: 20px;