sticky footer布局

最新推荐文章于 2023-03-29 19:59:11 发布

原创最新推荐文章于 2023-03-29 19:59:11 发布 · 227 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#布局

css 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使提交按钮始终固定于页面底部的布局方法——Sticky Footer。该方法通过CSS实现，无论页面内容多少，提交按钮都会保持在底部位置。此布局适用于需要固定操作按钮的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在页面布局时，内容很少的时候，提交按钮在页面的底部，当页面内容很多的时候，提交按钮在内容的底部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body,div,h1,p{margin:0; padding: 0;}
        .detail{
            position:fixed;
            overflow:auto;
            width:100%;
            height:100%;
        }
        .wrapper{
            min-height:calc(100% - 200px);
            width:100%;
            padding-bottom: 200px;
        }
        .wrapper p{
            line-height: 120px;
            font-size: 58px;
        }
        .footer{
            width:100%;
            height:150px;
            background:blue;
            margin:-150px auto 0 auto;
            font-size:32px;
            color:#fff;
            text-align: center;
            font-size:40px;
            line-height: 150px;
        }
    </style>
</head>
<body>
    <div class="detail">
        <div class="wrapper">
            <p>这里是main content区域..1.</p>
            <p>这里是main content区域..2.</p>
            <p>这里是main content区域..3.</p>
            <p>这里是main content区域..5.</p>
            <p>这里是main content区域..6.</p>
            <p>这里是main content区域..7.</p>
            <p>这里是main content区域..8.</p>
            <p>这里是main content区域..9.</p>
        </div>
        <div class="footer">底部按钮</div>
    </div>
</body>
</html>