stick footer布局

最新推荐文章于 2023-02-13 20:45:00 发布

原创最新推荐文章于 2023-02-13 20:45:00 发布 · 436 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#布局

HTML+CSS 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用CSS实现内容不足时底部元素固定显示，内容超出时底部元素随内容滚动的方法。通过设置相对定位及最小高度确保了底部元素的位置灵活性。

需求：将footer固定到底部，文章内容不足满屏时footer在底部，超过满屏时footer在内容末尾。

代码：

<style>
        * {
            margin: 0;
            padding: 0;
        }
        html,body {
            height: 100%;
        }
        .wrap {
            position: relative;
            min-height: 100%;
        }
        .cont {
            padding-bottom: 200px;
        }
        .icon {
            position: absolute;
            width: 100%;
            bottom: 100px;
            text-align: center;
        }
    </style>


<body>
    <div class="wrap">
        <div class="cont">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas porro quaerat, quo provident iste! Explicabo aliquam architecto incidunt reiciendis veritatis vero, ullam repellendus culpa vel, cupiditate, commodi pariatur fugiat eius.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas porro quaerat, quo provident iste! Explicabo aliquam architecto incidunt reiciendis veritatis vero, ullam repellendus culpa vel, cupiditate, commodi pariatur fugiat eius.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas porro quaerat, quo provident iste! Explicabo aliquam architecto incidunt reiciendis veritatis vero, ullam repellendus culpa vel, cupiditate, commodi pariatur fugiat eius.</p>
        </div>
        <div class="icon">
            <span>X</span>
        </div>
    </div>
</body>