紧贴底部的页脚

困难产生

一个页面正常是由头部、主要内容、页脚构成的，但当主要内容过少时，会出现页脚不能紧贴底部的问题

html

<body>
    <header>
    	<h1>设计原则</h1>
    </header>
    <main>
    	<p>一致性 Consistency...</p>
    </main>
    <footer>
    	<p>链接:https://element-plus.gitee.io/#/zh-CN/guide/design</p>
        <p>Element Team</p>
    </footer>
</body>

解决方案

body 使用 flex 布局，而头部和页脚高度由自身决定

css

body {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}
main { flex: 1; }