web前端flex的问题
微信小程序，我希望构建一个页面（main），分为标题（header）和内容（content）两大部分。标题固定不变的，内容是滚动的（scroll-view）。
首先通过main通过height: 100vh定义了页面高度，然后content通过flex:1定义了自动填充高度。
但content会被内容撑高，scroll-view不能滚动，导致变成了整个页面的滚动。
也尝试过在scroll-view外面套一个view来flex:1，但仍然无效。
求各位指教，谢谢。
WXML代码：
<view class="main">
<view class="header">
标题
</view>
<view class="content">
<scroll-view scroll-y>
<view>内容1</view>
<view>内容2</view>
<view>内容3</view>
<view>内容4</view>
<view>内容5</view>
<view>内容6</view>
<view>内容7</view>
<view>内容8</view>
<view>内容9</view>
<view>内容10</view>
</scroll-view>
</view>
</view>
WXSS样式代码：
.main {
height: 100vh;
display: flex;
flex-direction: column;
}
.header {
padding: 50px;
background-color: bisque;
}
.content {
/* flex: 1; */
background-color: chartreuse;
}
.content view {
border: 1px sienna solid;
height: 100px;
} content高度固定即可，把cobtent高度百分百 如果content要用flex: 1，那么header要给一个高度
荭颜祸水 发表于 2021-10-17 15:09
content高度固定即可，把cobtent高度百分百
问题在于我希望content是填充屏幕剩余高度，而不是固定高度。 kof21411 发表于 2021-10-17 15:14
如果content要用flex: 1，那么header要给一个高度
没用，试过了。 给content添加height: 0; 看楼主的意思，是希望内容滚动，头部固定吗，那flex:1不用设置的，给scroll-view设置高度height:(100vh - 头部的高度) ，内容就可以滚动了 一、scroll-view必须给高度，要么固定，要么最大，比如：max-height:80vh;或者height:80vh;这个时候内容过多是会滚动的；有背景色也可以给最小高度min-height:80vh;
二、不使用scroll-view，用view设置高度和overflow-y: auto;一样可以达到效果，头部固定用position: fixed; top: 0;
ps：这种设计没必要用flex布局，正常的流式布局就行，用flex反而有点别扭，
ps2：scroll-view不是这种效果的最佳实现，更加适合轮播图，和页面内组件左右切换 谢谢各位，脑洞打开了。
谢谢各位，感觉8楼的方法好。需求实现了。
<view class="main">
<view class="header">
标题
</view>
<view class="content" style="overflow-y: auto;">
<view>内容1</view>
<view>内容2</view>
<view>内容3</view>
<view>内容4</view>
<view>内容5</view>
<view>内容6</view>
<view>内容7</view>
<view>内容8</view>
<view>内容9</view>
<view>内容10</view>
</view>
</view>
.main {
height: 100vh;
display: flex;
flex-direction: column;
}
.header {
padding: 50px;
background-color: bisque;
}
.content {
flex: 1;
background-color: chartreuse;
}
.content view {
border: 1px sienna solid;
height: 100px;
}
页:
[1]