结构与布局

布局"/>

结构与布局

<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>

转载于:.html