Flex左右布局，高度相等自适应

最新推荐文章于 2025-01-17 11:32:31 发布

阿阿阿尔呀

最新推荐文章于 2025-01-17 11:32:31 发布

阅读量1.5w

点赞数 3

分类专栏： css/css3 html

本文链接：https://blog.youkuaiyun.com/aerbaba/article/details/104989793

版权

css/css3 同时被 2 个专栏收录

7 篇文章

订阅专栏

html

3 篇文章

订阅专栏

本文详细介绍了如何使用CSS设置页面的高度，确保其能完全填充视口。通过应用min-height和height属性，结合flex布局，实现了响应式设计中关键的布局需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
	flex: 1 auto;
	height: auto;
}
.main-right{
	flex: 1;
}