使用HTML完成页眉布局,如何使用CSS制作此页眉/内容/页脚布局？

使用flexBox，这很容易实现。

设置包含3个隔间的包装器以显示：flex;给它一个100％或100vh的高度。包装器的高度将填满整个高度，并显示：flex;将导致具有适当flex属性(例如flex：1;)的此包装器的所有子项都使用flexBox-magic进行控制。

示例标记：

I'm a 30px tall header

I'm the main-content filling the void!

I'm a 30px tall footer

和CSS一起陪伴它：

.wrapper {

height: 100vh;

display: flex;

/* Direction of the items,can be row or column */

flex-direction: column;

}

header,footer {

height: 30px;

}

main {

flex: 1;

}

– [旧答案] –

Layout

header {

height: 30px;

background: green;

}

footer {

height: 30px;

background: red;

}

I am a header

Lorem ipsum dolor sit amet,consectetur adipiscing elit. Fusce a ligula dolor.

I am a footer

适用于所有现代浏览器(FF4，Chrome，Safari，IE8和IE9)