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

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

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

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

пример

14 322
html css fluid-layout width

14 ответов:

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

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

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

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

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

370

вот почему у нас есть 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 не поддерживают это. Если вы ищете решение, которое работает в старых IEs, проверьте другие ответы.

270

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

padding: 5%;
width: 90%;
38

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

демо на jsFiddle:
enter image description here

  • сохранить входного 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 */ 
}
25

использовать 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/

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

16

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

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

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

Ура

Энди

7

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

видео

4

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

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

3

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

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

2

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

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

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

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

Ура

0

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

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

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

0

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

width: auto;
padding: 20px;
-8