粉丝：{{bookData.followerCount}}
{{!bookData.isSubscribed?'关注':'取消关注'}}
htmlcss1 <div class=\"containter\">2 <header>3 头部4 </header>5 <main>6 <div class=\"scroll\">7 <div>中间内容</div>8 <div>中间内容</div>9 <div>中间内容</div>10 <div>中间内容</div>11 <div>中间内容</div>12 <div>中间内容</div>13 <div>中间内容</div>14 <div>中间内容</div>15 <div>中间内容</div>16 <div>中间内容</div>17 <div>中间内容</div>18 </div>... [收起]
[展开]
![flex头部和底部固定中间内容滚动]()
{{!bookData.isSubscribed?'关注':'已关注'}}
粉丝: {{bookData.followerCount}}
文本内容
第1页
html
css
1 <div class=\"containter\">
2 <header>
3 头部
4 </header>
5 <main>
6 <div class=\"scroll\">
7 <div>中间内容</div>
8 <div>中间内容</div>
9 <div>中间内容</div>
10 <div>中间内容</div>
11 <div>中间内容</div>
12 <div>中间内容</div>
13 <div>中间内容</div>
14 <div>中间内容</div>
15 <div>中间内容</div>
16 <div>中间内容</div>
17 <div>中间内容</div>
18 </div>
19 </main>
20 <footer>
21 底部
22 </footer>
23 </div>
1 .containter {
2 display: flex;
第2页
3 flex-direction: column;
4 width: 100%;
5 height: 100%;
6 }
7 header,footer {
8 /* 不放⼤不缩⼩固定50px */
9 flex: 0 0 50px;
10 background: rgb(8, 117, 94);
11 color: #fff;
12 line-height: 100rpx;
13 }
14 main {
15 flex: 1;
16 overflow: auto; // 必加
17 }
百万用户使用云展网进行电子书本制作，只要您有文档，即可一键上传，自动生成链接和二维码(独立电子书)，支持分享到微信和网站！
更多案例
百万用户使用云展网进行电子书本制作，只要您有文档，即可一键上传，自动生成链接和二维码(独立电子书)，支持分享到微信和网站！
{{toast}}
