文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

sticky-footer

发布于 2023-08-19 19:14:40 字数 3683 浏览 0 评论 0 收藏 0

sticky-footer

<style>
    /**
     * Sticky footer with flexible height
     */

    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    main {
        flex: 1;
    }

    /* Toggle checkbox to alternate between short/long content */
    #contents:checked ~ p { display: none }

    /* Basic styling */
    body {
        margin: 0;
        font: 100%/1.5 Baskerville, Palatino Linotype, Palatino, serif;
    }

    h1 { margin: .5em 0 0; }

    header { text-align: center; height: 3em; }

    main, footer {
        display: block;
        padding: .5em calc(50% - 400px);
    }

    footer {
        background: linear-gradient(#222, #444);
        color: white;
    }
</style>
<body>
<header>
    <h1>Site name</h1>
</header>
<main>
    <input type="checkbox" id="contents"><label for="contents">Toggle contents</label>
    <p>Bacon ipsum dolor sit amet turkey veniam shankle, culpa short ribs kevin t-bone occaecat. Et laborum venison
        nostrud, ut veniam sint kielbasa ullamco pancetta. Qui drumstick tail, bacon leberkas shoulder capicola laborum.
        Minim ipsum bacon, mollit laboris t-bone pariatur. Ham hock reprehenderit sint beef, sausage pig eiusmod t-bone
        shankle strip steak.</p>
    <p>Cow enim excepteur, boudin dolore lorem magna fugiat consequat voluptate. Picanha fugiat chicken, cupim aliquip
        magna filet mignon prosciutto ut nostrud. Kielbasa rump frankfurter sunt corned beef. Andouille in cillum
        deserunt, rump et picanha landjaeger tongue anim.</p>
    <p>Ad meatball ipsum ground round shank. Quis ipsum meatball exercitation. Laborum swine spare ribs, sunt ball tip
        magna t-bone venison. Velit doner voluptate non occaecat do ribeye kevin strip steak et. Esse biltong shank
        ribeye dolor pariatur aute deserunt non est eiusmod pork belly pancetta pork chop. Pork chop id consectetur
        rump, meatball short loin brisket tail andouille deserunt alcatra irure prosciutto do.</p>
    <p>Dolore reprehenderit ex, meatball doner commodo consectetur ea ribeye. Ad aliqua kevin, chuck excepteur minim et
        cow esse ham hock landjaeger. Alcatra bresaola dolore tempor do, excepteur in velit flank officia dolore
        meatloaf corned beef picanha. Eu pancetta brisket eiusmod ipsum aute sausage, culpa rump shoulder excepteur
        nostrud venison sed pork loin. Tempor proident do magna ground round. Ut venison frankfurter et veniam dolore.
        Pig pork belly beef ribs kevin, doner exercitation magna esse shankle.</p>
    <p>Flank anim chuck boudin id consectetur bresaola ham pork loin cupim andouille frankfurter. Proident do ball tip
        nostrud nulla sed, frankfurter ut commodo corned beef ut. Ex aute in, pig deserunt beef ribs turducken pastrami
        irure ball tip pork belly pork chop sausage id. Chicken sunt nisi tempor sed. In eiusmod non fatback tempor
        tenderloin pastrami adipisicing cow lorem ut tail jerky cupidatat venison. Jowl consequat commodo pork loin
        ipsum pork belly prosciutto aute beef. Ball tip shoulder aliqua, fugiat landjaeger kevin pork chop beef ribs
        leberkas hamburger cillum turkey ut doner culpa.</p>
</main>
<footer>
    <p> 2015 No rights reserved.</p>
    <p>Made with heart by an anonymous pastafarian.</p>
</footer>
</body>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

sticky-footer

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。