css-上下布局，上面高度任意值，下面盒子自适应填满剩余部分

最新推荐文章于 2024-07-25 10:45:42 发布

花笙_

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量3.5k

点赞数 2

文章标签： css css3 html

本文链接：https://blog.csdn.net/wang_59881/article/details/128329273

版权

已知整个盒子的高度为500px，上下布局，上盒子任意高度，下面盒子都可以自适应填满剩余部分，上下盒子都不知道高度
页面效果：

1671084387860_Trim

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        height: 500px;
        width: 500px;
        display: flex;
        flex-direction: column;
        border: 1px solid #000;
    }
    .top{
        height: 20%;
        background: pink;
    }
    .bottom{
        background: skyblue;
        flex-grow: 1;
    }
</style>
<body>
    <div class="box">
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</body>
</html>

主要用到的是flex布局，父盒子flex布局，从上往下排列

flex-direction: column

flex-grow: 1

flex-direction：设置主轴的方向

属性值：row    // 默认从左往右布局
	row-reverse  //  从右往左
	column  // 从上往下
	column-reverse  //  从下往上

flex-grow：用于设置或检索弹性盒子的扩展比率，这里默认比率是1

举个例子：相当于将整个div分了4份，第二份占二分之一，剩下两个占四分之一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        height: 500px;
        width: 500px;
        display: flex;
        flex-direction: column;
        border: 1px solid #000;
    }
    
    .top{
        background: skyblue;
        flex-grow: 1;   // 正常一个div占据1份
    }
    .top:nth-child(2){
        background: pink;
        flex-grow: 2;   // 第二个div占2份
    }
</style>
<body>
    <div class="box">
        <div class="top"></div>
        <div class="top"></div>
        <div class="top"></div>
    </div>
</body>
</html>

如图：
在这里插入图片描述
将代码中的flex-direction设置为row，则是横向排列