css元素高度的布局问题?
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
.box {
height: 300px;
background-color: red;
}
在css中,div的宽度默认独占一行,而高度需要手动设置。上面的布局,box 高度 300box1的高度未知,可能是100,可能是50box2的高度如何占满余下空间?如果box1高度为 100,那么box2高度应该是200,且不会受box2内部元素的高度影响。如果box1高度为100且margin-bottom: 10px,那么box2高度应该为 190px。如果box2上面有n个盒子,box2的高度应该是 box - n个盒子高度的余下值。请问这种高度自适应的布局,各位是怎么实现的?有没有比较好的方法?
回复
1个回答

test
2024-07-05
用flex
布局即可
.box {
display: flex;
flex-direction: column;
}
.box2{
flex: 1;
}
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容