Процент ширины и ширины CSS без разметки

Для этого может быть простое исправление, но это беспокоило меня целую вечность...

Позвольте мне объяснить ситуацию. У меня есть div с ID-контейнером, который содержит все содержимое страницы (включая верхний и нижний колонтитулы), которые будут содержать все встроенные, и я могу сделать только 1 простой "margin: 0 auto"; вместо кратных. Так что скажем, что у меня ширина # контейнера установлена ​​на 80%. Теперь, если я добавлю другой div внутри с такой же шириной (80%) и дам ему идентификатор "header" с 10px отступов вокруг, макет будет "ломаться" (так сказать), потому что страница добавляет количество отступов на ширина. Итак, как я могу заставить его оставаться в границах без использования таких методов, как более низкий процент для div #header? В принципе, я хочу сделать его жидким.

Вот пример кода, который даст вам представление о том, о чем я говорю...

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>

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

Ответы

Ответ 1

Если вы хотите, чтобы #header была той же ширины, что и ваш контейнер, с 10px отступов, вы можете оставить объявление ширины. Это заставит его неявно взять всю свою родительскую ширину (поскольку div по умолчанию является элементом уровня блока).

Затем, поскольку вы не указали ширину на нем, 10px отступов будет правильно применено внутри элемента, а не добавляется к его ширине:

#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;
}

Здесь рассказывается о том, как размер окна будет.

Ответ 2

Попробуйте удалить position из header и добавить overflow в container:

#container {
    position:relative;
    width:80%;
    height:auto;
    overflow:auto;
}
#header {
    width:80%;
    height:50px;
    padding:10px;
}