手机端在input输入情况下，如何使按钮位于页面底端

Question

如图，我想实现如图所示的效果

html代码如下

<div class="introduce">
    <textarea class="input"></textarea>
    <button class="save">保存</button>
</div>

css代码如下（使用的stylus）

  .introduce
    position: absolute
    top: 0
    bottom: 0
    left: 0
    right: 0
    .input
      height: 250px
      width: 100%
      box-sizing: border-box
      padding: 10px
      font-size: 15px
      color: #333
      resize: none
    .save
      position: fixed
      bottom:0
      left:0
      height: 48px
      line-height: 48px

但是在手机端，点击输入时，底部的保存按钮会“弹上来”，我想问怎样让其位于页面底端

Answer 1

不要用fixed

Answer 2

外面包div盒子吧 昨天我也遇见这个问题了，现在已经解决 input外面一个div 按钮外面一个div 俩盒子外面一个div 最外面的那绝对定位 left top bottom right都为0 按钮那个定位到最下面即可

Answer 3

用flex布局撑满中间高度，按钮就自然到底部了

Answer 4

document.getElementById('introduce').style.height = document.body.scrollHeight + 'px'

Answer 5

获取焦点隐藏掉按钮

  .input:focus+ .save{
           
             display: none;
       }