Возможно ли это руководство по размеру только с CSS?

Question

<header> - fixed height 
<maincontent> height fills rest of window 
<footer> starts just offscreen requiring scroll to see. 

Я могу сделать это математически с помощью Javascript, но хочу знать, можно ли использовать только CSS.

Header height 100px;
maincontent 100% margin top -100px;
paddingtop 100px сноска

Будет ли это работать эффективно?

Answer 1

Это будет работать:

Это то, что вы думаете: http://jsfiddle.net/bexcf/1/

Вот разметка:

CSS

html, body { height:100%;padding:0;margin:0; } 
body { 
    padding-top:100px; 
    background-color: teal; 
} 
header,footer { 
    width:100%; 
    height:100px; 
    padding:0;margin:0; 
} 
header { 
    position:absolute; 
    top:0; 
    left:0; 
    background-color:red; 
} 
.main-content { 
    width:100%; 
    height:100%; 
    background-color: gold; 
} 
footer { 
    background-color:green; 
} 

HTML

<header><h1>Header</h1></header> 
<div class="main-content">Main Content</div> 
<footer>Footer</footer>