顶部元素高度不固定，下面元素高度自适应

是栀子吖

已于 2024-07-11 10:25:11 修改

阅读量57

点赞数

文章标签：前端 javascript css

于 2023-10-13 09:39:00 首次发布

本文链接：https://blog.csdn.net/qq_40682410/article/details/133803919

版权

<!-- 头部不固定,底部高度自适应 这种是通过flex布局实现 
```html
<div id="wrapper">
	<div class="header">头部</div>
	<div class="main">剩下的</div>
</div>```
```css
#wrapper
{
	width:100%;
	height:100%;
	display: flex;
	flex-direction: column; 
}
.header{
	width:100%;
	height: auto;
	flex-shrink:0; 
}
.main{
  width:100%;
  flex:1;//flex1的意思就是flex-grow1,这里是缩写
  //flex-grow:1;
  overflow-y: auto;
}