Почему позиция: фиксированная и ширина: 100% заставляют мой div выйти из оконных границ? [dубликат]

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

 padding: 5%;  ширина: 90%;  

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

  width: auto;  право: 15px;  слева: 15px;   

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

Приветствия

Энди

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

Супер простой и удивительный.

  input {width: -moz-calc (100% - 15px);  ширина: -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/

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

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

  {ширина: 100%;  граница: прозрачный прозрачный 10px;  }  

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

Пример в реальном времени

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

  width: auto;  обивка: 20px;   

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

  ширина: 100%;  box-size: border-box;   

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

  width: 100%;  padding: 5px;  / * -------------- Теперь удалите из дополнения, добавленного вами --------------- * / margin: -5px;   

Приветствия

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

  & lt; style & gt;  div.outer {background: red;  padding: 10px;  } div.inner {border: 1px solid # 888;  padding: 5px 10px;  фон: белый;  } вход {ширина: 100%;  border: none} & lt; / style & gt;  & lt; div class = "external" & gt;  & lt; div class = "inner" & gt;  & Lt; вход / & GT;  & Lt; / дел & GT;  & Lt; / дел & GT;   

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

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

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

  input {-webkit-box-sizing: border-  коробка;  -moz-box-size: border-box;  box-size: border-box;  }  

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

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

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

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

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

Демонстрация на jsFiddle : [!d13]

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

HTML-разметка:

  & lt; div class  = "input_wrap" & GT;  & lt; input type = "text" / & gt;  & Lt; / дел & GT;   

CSS:

  div {padding: 6px 10px;  / * равно отрицательному значению поля ввода для мимического нормального `div` box-sizing * /} input {width: 100%;  / * сила расширения до ширины контейнера * / padding: 5px 10px;  border: none;  margin: 0 -10px;  / * отрицательный край = ширина границы + горизонтальное дополнение * /}