css实现页面底部固定在屏幕最下方,内容占满屏后紧跟其后的两种方法_css设置按钮在页面底部,且随着页面内容排在最后-CSDN博客

本文链接：https://blog.csdn.net/dwb123456123456/article/details/86540582

本文介绍了两种使用CSS实现页面底部固定在屏幕最下方的方法。第一种方法适用于底部高度固定的场景，通过设置page-container的最小高度为100%，并结合absolute定位实现。第二种方法利用flex布局，兼容性好，可灵活适应底部高度变化的情况。

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

1.只针对底部高度固定的情况，不能解决底部高度不固定的情况，

原理：主要内容放在page-main里面，page-container最小高度100%（注意这里html，body高度也要设为100%），position为relative。footer的position为absolute，相对于page-container居于底部。page-main有个padding-bottom为footer的高度（根据需要调整），从而达到需求效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .page-container {
        position: relative;
        min-height: 100%;
    }

    .header {
        height: 200px;
        width:100%;
        background: #000;
    }

    .page-main {
        padding-bottom: 300px;
        background: red;
        height: auto;
        font-size: 20px;
    }

    footer {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 300px;
        background: aqua;
    }
</style>

<body>
    <div class="page-container">
        <div class="header">
            头部
        </div>
        <div class="page-main">
            主要页面
            <br/> 主要页面
            <br/> 主要页面
            <br/> 主要页面
            <br/> 主要页面
            <br/> 主要页面
            <br/> 主要页面
            <br/> 主要页面
            <br/> 主要页面
            <br/> 主要页面
            <br/> 主要页面
            <br/> 主要页面
            <br/> 主要页面
            <br/>
        </div>
        <footer>底部</footer>
    </div>
</body>

</html>

2.利用flex布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0
    }

    .detail {
        /* 因为是遮罩效果所以要fixed */
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        width: 100%;
        background: rgba(7, 17, 27, .8);
        /*必须 */
        display: flex;
        /* 必须，规定元素的排列方向 */
        flex-direction: column;
        /* 必须占满屏 */
        height: 100%;
        /* 没有这个就不能滚动了 */
        overflow: auto;
    }

    .detail-header {
        width: 100%;
        height: 100px;
        text-align: center;
        /* background: #a3e; */
    }

    .detail-wrapper {
        width: 100%;
        /* 占了百分百-flex:0的占位 */
        flex: 1;
        /* background: #143541; */
        font-size: 40px;
        text-align: center;
    }

    .detail-close {
        /* 占位用 */
        flex: 0;
        margin: 0 auto;
        /* background: #555555; */
    }
</style>

<body>
    <div class="detail">
        <div class="detail-header">
            我是头部
        </div>
        <div class="detail-wrapper">
            我是内容
            <br/> 我是内容
            <br/> 我是内容
            <br/> 我是内容
            <br/> 我是内容
            <br/> 我是内容
            <br/> 我是内容
            <br/> 我是内容
            <br/> 我是内容
            <br/> 我是内容
            <br/> 我是内容
            <br/> 我是内容
            <br/>
        </div>
        <div class="detail-close">
            我是底部
        </div>
    </div>
</body>

</html>

现在flex基本都可以兼容其他浏览器，所以可以放心使用