web前端flex的问题

cqwcns

微信小程序，我希望构建一个页面（main），分为标题（header）和内容（content）两大部分。
标题固定不变的，内容是滚动的（scroll-view）。


首先通过main通过height: 100vh定义了页面高度，然后content通过flex:1定义了自动填充高度。


但content会被内容撑高，scroll-view不能滚动，导致变成了整个页面的滚动。


也尝试过在scroll-view外面套一个view来flex:1，但仍然无效。


求各位指教，谢谢。


WXML代码：

[HTML] 纯文本查看 复制代码

<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样式代码：

[CSS] 纯文本查看 复制代码

.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高度百分百

kof21411

如果content要用flex: 1，那么header要给一个高度

cqwcns

荭颜祸水 发表于 2021-10-17 15:09
content高度固定即可，把cobtent高度百分百

问题在于我希望content是填充屏幕剩余高度，而不是固定高度。

cqwcns

kof21411 发表于 2021-10-17 15:14
如果content要用flex: 1，那么header要给一个高度

没用，试过了。

wang0

给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不是这种效果的最佳实现，更加适合轮播图，和页面内组件左右切换

cqwcns

谢谢各位，脑洞打开了。

cqwcns

谢谢各位，感觉8楼的方法好。需求实现了。

[HTML] 纯文本查看 复制代码

<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>

[CSS] 纯文本查看 复制代码

.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;
}