Понимание div и CSS

Question

Я бы подумал, что если у вас есть div с высотой css: 100%, то вложенный внутри него div будет занимать только пространство его родительского div. Кажется, это не так.

Я пытаюсь иметь верхний и нижний колонтитул на веб-странице моей флеш-игры. Я не хочу иметь вертикальную прокрутку, и содержимое должно занимать всю страницу. У меня есть формат DIV следующего

<div id="wrapper"> 
    <div id="header"></div> 
    <div id="swfcontent"></div> 
    <div id="footer"></div> 
</div> 

я сделать обертки имеют высоту 100%, то я сделать заголовок еще 3% по высоте, высоты swfcontent 95% и 2% колонтитула высоты. Это работает, но заголовок, который масштабируется с размером браузера, нежелателен. Это сделает мой логотип и будет искажен.

Что я хотел бы сделать, так это то, что верхний и нижний колонтитулы имеют размер статического пикселя, например, 20 и 10 пикселей. Тогда swf займет все оставшееся пространство, то есть 100%. Однако это приводит к тому, что страница растет и имеет вертикальное масштабирование.

Как настроить страницу, чтобы иметь заголовок 20px, нижний колонтитул 10px и swf, который занимает все оставшееся пространство без вертикальной прокрутки. Это, конечно, должно продолжаться, если браузер масштабируется.

Answer 1

По умолчанию <div> - position:static, который не устанавливает новый позиционированный контекст. Все ширины, высоты и положения детей не относятся к самому div, а к его текущему позиционированному родителю.

Чтобы заставить ваш div установить новую систему координат, установите ее на position:relative или position:fixed или position:absolute.