Расширение DIV, чтобы заполнить доступное пространство страницы допустимым CSS в IE

Question

Я пытаюсь сделать простой макет DIV, совместимый с IE, и это дает мне ад.

Вот базовый макет, для которого я работаю:

<div id="body" style="background: blue;">
<div id="header">
 HEADER
</div>
<div id="content" style="height: 88%;">
 CONTENT HERE
</div>
<div id="footer">
 FOOTER
</div>
</div>

I 'Я использую скругленные углы CSS на элементе Body, и у меня есть информация о навигационной панели и нижнем колонтитуле в #footer, а также главная навигационная панель с вкладками в #header.

Моя главная проблема - сделать #contentdiv растягивается вертикально, чтобы уместиться на всю страницу, когда у меня есть только небольшое количество контента без создания вертикальных полос прокрутки.

Если я сделаю #content height: 100%;, верхний и нижний колонтитулы приведут к тому, что высота страницы превысит 100%и запускает полосы прокрутки.

Создание высоты #content на 88% помогает в FireFox, но есть две проблемы с этим решением:

a) Это отвратительный взлом b) Он не работает вIE (конечно).

У кого-нибудь есть идеи, как этого добиться?Я предполагаю, что это должно быть довольно распространенной ситуацией для веб-дизайнеров.

Answer 1

Вот, пожалуйста, попробуйте этот шаблон, он действительно прост, и я думаю, что он решит вашу проблему.

HTML:

<div id="wrapper">
    <div id="header">
    <div id="header_900">
    <p>header</p>
    </div><!--header_900-->
</div>      
<div id="content">
    <div id="content_900">
        <p>content</p>
    </div>  </div>      

</div><!--wrapper-->


<div id="footer">
<div id="footer_900">
    <p>footer</p>   
</div>    </div>

CSS

body, html{
height: 100%;
}

body, p {
margin: 0; padding: 0;
}   

#wrapper {
min-height: 100%;
}

* html #wrapper {
height: 100%;
}



/*HEADER------------------------------------*/
#header {
width: 100%;
background: #666;
}

#header_900 {
width: 960px;
height: 100px;
margin: 0 auto;
position: relative;
overflow: hidden;
}

/*FOOTER------------------------------------*/
#footer {
width: 100%;
height: 100px;
margin: -100px auto 0 auto; /*THIS SHOULD BE EQUAL TO THE FOOTERS HEIGHT*/
position: relative;
background: #666;
}

#footer_900 {
width: 960px;
height: 100px;/*THIS IS THE FOOTERS HEIGHT*/
position: relative;
margin: 0 auto;
}

/*CONTENT------------------------------------*/
#content {
width: 100%;
padding-bottom: 100px; /*THIS SHOULD BE EQUAL TO THE FOOTERS HEIGHT*/
}

#content_900 {
width: 960px;
margin: 0 auto;
overflow: hidden;
}

Answer 2

Я не думаю, что есть официальный способ сделать это, если вы не используете режим причуд. Если вы используете режим quirks (без doctype), он будет выглядеть примерно так:

html, body {
    margin: 0;
    padding: 0;
    height: 100%:
}

#content {
    height: 100%:
}

Возможно, вы ищете адаптированную версию чего-то вроде этого: http://www.alistapart.com/comments/fauxcolumns