Flex左右布局,高度相等自适应
程序员文章站
2022-05-01 12:34:05
...
css:
//body高度要撑开
html,body{
min-height: 100%;
height: 100vh;
}
//父级
.box-fix{
min-height: 100%;
display: flex;
justify-content: space-between;
}
子级
.main-left{
width: 210px;
flex: 0 0 210px;
height: auto;
}
.main-right{
flex: 1;
}
上一篇: revit坐标与屏幕坐标的转换
下一篇: js获取距离屏幕的坐标
推荐阅读
-
脚本控制三行三列自适应高度DIV布局的代码
-
前端一面/面试常考题1-页面布局:假设高度已知,请写出三栏布局,其中左栏、右栏宽度各为300px,中间自适应。
-
--------------------------三栏布局之左右宽度固定,中间自适应--------------------------
-
基于jQuery实现左右div自适应高度完全相同的代码
-
上下布局高度自适应屏幕
-
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
-
左右布局,左侧导航固定宽度且高度撑满整个屏幕,右侧内容宽度自适应
-
脚本控制三行三列自适应高度DIV布局的代码
-
Flex布局让子项保持自身高度的实现
-
flex布局,左右两端固定,中间自适应且超出隐藏