CSS - высота 100% с верхним и нижним колонтитулом

Я пытаюсь создать страницу с заголовком, основным div, который растягивается до 100% вертикального ландшафта (минус верхний и нижний колонтитул) и нижний колонтитул. Как этот рис:

Я могу заставить заголовок и главный div работать. Вот так:

    <div id="wrapper">

        <div class="header_div">HEADER</div>
        <div class="main_div">MAIN</div>
        <div class="footer_div">FOOTER</div>

    </div>

С помощью этого CSS:

html {
    height: 100%;
 }

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

.header_div{

    height: 40px;
    width: 100%;
    background-color: #000000;

}

.main_div{

    margin-bottom:40px;
    margin-top:40px;
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-color: red;
}


.footer_div{

    position: relative;
    height: 40px;
    width: 100%;
    background-color: blue;
}

Таким образом, главный div запускает 40px сверху, чтобы учесть заголовок, а затем останавливает 40px снизу до учетной записи нижнего колонтитула. Это хорошо работает, но я не могу получить нижний колонтитул ниже основного div. То, как сейчас, с position: relative, помещает нижний колонтитул поверх главного div. Если я использую position:absolute, он помещает его под основным div.

Я уверен, что просто делаю это неправильно, потому что CSS - это не мое дело.

Любая помощь по этому поводу была бы большой.

Спасибо

Ответ 1

Использование CSS3 Flexbox:

/*QuickReset*/*{margin:0;box-sizing:border-box;}


body {                /* body - or any parent wrapper */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>

Ответ 2

Используйте функцию css calc().

С помощью этого метода вам не нужно определять положение элементов

Вот демон

HTML:

<header>Header</header>
<main>Main</main>
<footer>Footer</footer>

CSS

html, body { 
    height: 100%
}

body {
    color: #FFF;
    padding: 0;
    margin: 0;
}

header { 
    background-color: #000;
    height: 100px;    
}

main { 
    background-color: #AAA;
    height: calc(100% - 150px);    
}

footer { 
    background-color: #000;
    height: 50px;    
}

Ответ 3

Вот простой способ. Попробуйте этот jsfiddle: http://jsfiddle.net/PejHr/

HTML:

<div id="top"></div>
<div id="main">
    <div id="inner"></div>
</div>
<div id="bottom"></div>

CSS

#main {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 50px 0px
}
#inner {
    width: 100%;
    height: 100%;
    background: #f0f;
}

#top, #bottom {
    width: 100%;
    height: 50px;
    background: #333;
    position: absolute;
    top: 0px;
    left: 0px;
}

#bottom {
    bottom: 0px;
}