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

Posted 2021-02-17 pikachuworld

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