html css设计页眉页脚,如何使用CSS制作此页眉/内容/页脚布局？

小编典典

使用flexbox，这很容易实现。

将包含3个隔层的包装器display: flex;的高度设置为100%或100vh。包装器的高度将填满整个高度，这display:

flex;将使该包装器的所有子级具有适当的flex-properties(例如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 +)

2020-05-16