移动端或者小程序头部和底部固定，中介自适应滑动

最新推荐文章于 2023-06-18 21:28:21 发布

zyf13671493506

最新推荐文章于 2023-06-18 21:28:21 发布

阅读量563

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/zyf13671493506/article/details/106160018

版权

前端专栏收录该内容

213 篇文章 0 订阅

订阅专栏

https://www.jianshu.com/p/43273e398c66

<body>
  <div class="container">
    <header>2</header>
    <footer>1</footer>
  </div>
</body>

方法一

使用css 的计算属性 calc

.container{
   width: 100%;
   height: 100vh;
 }
 header{
   width: 100%;
   height: 50px;
   background: red;
 }
 footer{
   width: 100%;
   height: calc(100vh - 50px);
   background: blue;
 }

方法二

利用 css 弹性盒子 display:flex

flex布局详解

.container{
   width: 100%;
   height: 100vh;
   display: flex;
   flex-direction: column;
 }
 header{
   width: 100%;
   height: 50px;
   background: red;
   flex-grow: 0;
 }
 footer{
   width: 100%;
   background: blue;
   flex-grow: 1;
 }

小程序的 scroll-view 也可以用这种方法动态的去设置高度。需要稍微改动一下。
把 scroll-view 的高度设置成100%；给外出 body 一个高度。这个高度在flex-grow 的作用下并不会起作用。

<view class="container">
  <view class="header"></view>
  <view class="body">
     <scroll-view  :scroll-y="true" class="scroll-view"></scroll-view>
  </view>
</view>

.container{
   width: 100%;
   height: 100vh;
   display: flex;
   flex-direction: column;
 }
 .header{
   width: 100%;
   height: 50px;
   background: red;
   flex-grow: 0;
 }
.body{
   width: 100%;
   background: blue;
   heigth:100px;
   flex-grow: 1;
}
.scroll-view{
   height:100%;
}