CSS Div ширина в процентах и ​​отступы, не нарушая расположение

Question

Там может быть просто исправить это, но она беспокоила меня в течение веков теперь ...

Позвольте мне объяснить ситуацию. У меня есть 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> 

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

Answer 1

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

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

#container { 
    position: relative; 
    width: 80%; 
} 

#header { 
    position: relative; 
    height: 50px; 
    padding: 10px; 
} 

Вы можете увидеть его in action here.

Ключ при использовании процентной ширины и отступов/полей пикселей не должен определять их на одном и том же элементе (если вы хотите точно контролировать размер). Примените процентную ширину к родительскому элементу, а затем добавление/отступ пикселя к дочернему элементу display: block без установленной ширины.

---

Update

Еще один вариант для решения этой проблемы является использование правила box-sizing CSS:

#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 works.

Answer 2

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

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