随心而动的底部

在我们做项目的时候，产品经常会要求我们做到这点： 当我们内容不足浏览器窗口高度时，底部内容需要固定在底部。 当内容超出了浏览器窗口高度，就会随在内容的后面。

今天在这简单的记录一下解决方案：

方案一：

<view class="wrap">
    <view class="header">头部</view>
    <view class="content">
        <view class="content__title">内容内容内容</view>
        <view class=“content__grids”>九宫格内容</view>
    </view>
    <view class=“footer”>底部内容</view>
</view>

page{
    background: #F7F7F7;
    height: 100%;
}
.wrap{
    min-height: 100%;
    position: relative;
}
.header{
    width: 750rpx;
    height: 80rpx;
    background: red;
}
.content{
    padding-bottom: 148rpx;
    height: auto;
}
.footer{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 148rpx;
}
.content__title{
    width: 750rpx;
    /* height: 1080rpx; */
    background: #07C160;
}

方案二：

<view class="content">内容内容</view>
<view class="footer">底部内容</view>

page{
    background: #F7F7F7;
    height: 100%;
}
.content{
    min-height: 100%;
    box-sizing: border-box;
    padding-bottom: 148rpx;
    height: auto;
    background: #07C160;
}
.footer{
    height: 148rpx;
    margin-top: -148rpx;
}
.content__title{
    width: 100%;
    /* height: 1080rpx; */
}

方案三：利用flex布局

<view class="wrap">
  <view class="content">
    <view class="content__title">内容内容内容</view>
    <view class="content__grids">内容内容</view>
  </view>
  <view class="footer">底部内容</view>
</view>

.wrap{
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.content{
  flex: auto;
}
.footer{
  flex-shrink: 0;
}
.content__title{
  width: 750rpx;
  height: 1080rpx;
  background: #07C160;
}