CSS上下布局；上固定，下弹性

最新推荐文章于 2024-09-05 10:31:00 发布

Sky_0418

最新推荐文章于 2024-09-05 10:31:00 发布

阅读量1.8k

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_47187700/article/details/123203004

版权

本文记录了三种实现CSS上下布局的方法：强行布局、flex弹性布局和grid布局，适合前端开发者学习和参考。

摘要由CSDN通过智能技术生成

说来惭愧

之前一直用的都是三栏布局等左右布局

今天遇到上下布局，一时间竟咬不准答案

特此记录一下

方法一、强行布局

<div class="container">
        <div class="top">1</div>
        <div class="bottom">2</div>
    </div>

      * {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }

        .container {
            position: relative;
        }

        .top {
            height: 100px; 
            background-color: red;
        }

        .bottom {
            position: absolute; 
            background-color: pink;
            top: 100px;
        }