结构与布局-紧贴底部的页脚

<style>

*{margin:0;padding: 0;}

/*第一种方法*/

/*body{color:#fff;text-align: center;}

header{background: #000;height:3.5em;}

main{

min-height: calc(100vh - 3.5em - 3.5em);

box-sizing: border-box;

background: #0b7c4b;

}

footer{background: #103582;height:3.5em;}*/

/*第二种方法*/

body{display: flex;flex-flow: column;text-align: center;}

main{flex:1;background: #103582;min-height: 100vh;}

footer{background: #000;color:#fff;}

</style>

<header>

<h2>41.紧贴底部的页脚</h2>

<p>我是头部</p>

</header>

<main>

<h2>I am main</h2>

<h2>what can be the meaning of that</h2>

<p>emphatic exclamation </p>

</main>

<footer>

<p> Iam footer</p>

<p>@2018 no right reserve.</p>

<p>made with by song</p>

</footer>

原文地址：https://www.cnblogs.com/pikachuworld/p/10742262.html