版权声明：本文为博主原创文章，未经博主允许不得转载。
本文要实现的效果为始终让下方的一个盒子位于最底部，如果所示：
在这里插入图片描述
html代码为：

<body>
    <div class="content">content</div>
    <div class="footer">footer</div>
</body>

css实现方法一：使用定位：

body {
        margin: 0;
        padding: 0;
    }
    .footer {
        width: 100%;
        height: 80px;
        background: #5b6d81;
        line-height: 80px;
        text-align: center;
        /* 方法一 */
        position: fixed;
        bottom: 0;
    }

css实现方法二：使用100vh

body {
        margin: 0;
        padding: 0;
    }
    .footer {
        width: 100%;
        height: 80px;
        background: #5b6d81;
        line-height: 80px;
        text-align: center;
        /* 方法一 */
        /* position: fixed;
        bottom: 0; */
    }
    .content {
        height: 100vh;
    }
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

任务型Agent：prompt工程实践

avatar 2048 AI社区

提示工程架构师必学：智能设备中的提示优化实战

智能设备的普及，让提示工程从“实验室”走进了“生活”。对于提示工程架构师而言，智能设备中的提示优化不仅是技术挑战，更是对“用户体验”的深刻理解——如何在“有限的资源”中，用“最精简的提示”，实现“最贴心的交互”。本文介绍的6大实战技巧（精简、实时、并行、跨模态），只是智能设备提示优化的“冰山一角”。未来，随着AIoT的进一步融合，提示工程将迎来更多新的挑战，但也会有更多新的机遇。让我们一起，用提示

avatar 2048 AI社区

2025技能图谱：提示工程架构师构建可持续AI提示系统需要的新能力清单

组件类型示例内容输入参数输出格式通用-语气控制“使用亲切的语气，称呼用户为‘亲爱的[用户名]’”用户名字符串通用-伦理约束“如果用户的问题涉及违法内容（如诈骗、毒品），请回复‘抱歉，无法回答这个问题’”用户问题布尔值（是否触发）场景-订单查询“请用户提供订单号（格式：XXX-XXXXXXX），并说明查询目的（如物流、退款）”无字符串场景-退货流程“退货需要3步：1. 申请退货；2. 邮寄商品；3.

avatar 2048 AI社区