Процент ширины CSS Div и отступы без нарушения макета
Для этого есть простое решение, но теперь это беспокоит меня целую вечность ...
Пусть Я объясню ситуацию. У меня есть div с идентификатором 'container', который содержит все содержимое на странице (включая верхний и нижний колонтитулы), в котором все будет встроено, и вместо этого я могу сделать только 1 простой 'margin: 0 auto;' кратных значений. Итак, допустим, что у меня ширина #container установлена на 80%. Теперь, если я помещу внутрь еще один div с такой же шириной (80%) и дам ему идентификатор 'header' с 10px отступом вокруг, макет "сломается" (так сказать), потому что страница добавляет величину отступа к ширине. Итак, как я могу заставить его оставаться в границах без использования таких методов, как более низкий процент для #header div? В основном, я
Вот пример кода, чтобы дать вам представление о том, о чем я говорю ...
CSS
#container {
position:relative;
width:80%;
height:auto;
}
#header {
position:relative;
width:80%;
height:50px;
padding:10px;
}
HTML
<div id="container">
<div id="header">Header contents</div>
</div>
Может ли кто-нибудь помочь мне с этой проблемой, которая возникла? жук меня навсегда?
2 ответа
Если вы хотите, чтобы #header был той же ширины, что и ваш контейнер, с отступом 10 пикселей, вы можете не указывать его объявление ширины. Это приведет к тому, что он неявно займет всю ширину своего родителя (поскольку div по умолчанию является элементом уровня блока).
Затем, поскольку вы не определили для него ширину, 10 пикселей отступа будут правильно применены внутри элемента, а не добавляются к его ширине:
#container {
position: relative;
width: 80%;
}
#header {
position: relative;
height: 50px;
padding: 10px;
}
Вы можете увидеть это в действии здесь .
Ключ при использовании ширины в процентах и отступов / полей в пикселях заключается в том, чтобы не определять их для одного и того же элемента (если вы хотите точно контролировать размер). Примените процентную ширину к родительскому элементу, а затем заполнение / поле пикселей к дочернему элементу display: block без установленной ширины.
Обновление
Другой способ справиться с этим - использовать правило CSS box-sizing :
#container {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
/* Since this element now uses border-box sizing, the 10px of horizontal
padding will be drawn inside the 80% width */
width: 80%;
padding: 0 10px;
}
Здесь рассказывается о том, как работает box-sizing .
Попробуйте удалить позицию из заголовка и добавить переполнение в контейнер :
#container {
position:relative;
width:80%;
height:auto;
overflow:auto;
}
#header {
width:80%;
height:50px;
padding:10px;
}