问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css 怎么实现自定义占满内容高度，适配不同分辨率？

头像
dingfc
    4373963

    PC端，如下图，2、5、3比例占满内容高度，适配不同分辨率，css弹性布局可以实现吗

    image.png

    css3htmlhtml5css
    阅读 1.6k
    2 个回答
    得票最新
    头像
    玛拉_以琳
      8.7k41542
      .父盒子{
display: flex;
/* 改变主轴方向 主轴为垂直方向，起点在上沿，从上至下排列*/
flex-direction: column;
align-items: center: /* 交叉轴的中点对齐(可以理解为垂直居中)*/
}
.纸盒子1{
    flex: 2
}
.纸盒子2{
    flex: 5
}
.纸盒子3{
    flex: 3
}

      image.png

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      height: 200px;
      width: 100px;
      background: #000;
      display: flex;
      /* 改变主轴方向 主轴为垂直方向，起点在上沿，从上至下排列*/
      flex-direction: column;
      align-items: center;
        /* 交叉轴的中点对齐(可以理解为垂直居中)*/
    }

    .son1 {
      flex: 2;
      background: pink
    }

    .son2 {
      flex: 5;
      background-color: blue;
    }

    .son3 {
      flex: 3;
      background-color: cadetblue;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="son1"></div>
    <div class="son2"></div>
    <div class="son3"></div>
  </div>
</body>
</html>
      头像
      陟上晴明
        21.4k144991

        flex 布局修改一下 flex-direction方向，然后配置一下各项的 flex-grow 属性就行；

        <style>
  body { margin: 0; }
  .wrap { height: 100vh; display: flex; flex-direction: column; }
  .box2 { background: gray; flex-grow: 2 }
  .box5 { background: white; flex-grow: 5 }
  .box3 { background: gray; flex-grow: 3 }
</style>
<body>
  <div class="wrap">
    <div class="box2"></div>
    <div class="box5"></div>
    <div class="box3"></div>
  </div>
</body>

        使用 flex 布局
        也可以使用视窗单位（vh） 实现：

        <style>
  body { margin: 0; }
  .box2 { background: gray; height: 20vh }
  .box5 { background: white; height: 50vh }
  .box3 { background: gray; height: 30vh }
</style>
<body>
  <div class="wrap">
    <div class="box2"></div>
    <div class="box5"></div>
    <div class="box3"></div>
  </div>
</body>

        使用视窗单位

        相关阅读

        Flex 布局教程：语法篇 - 阮一峰的网络日志
        flex-grow - CSS：层叠样式表 | MDN

        使用视口单位实现响应式排版 - 响应式设计 - 学习 Web 开发 | MDN

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题