打开input输入的时候,css中position:absolute/fixed定位的时候,定位元素上移问题解决

1、异常代码

　　

<style>
  .box{
    min-height: 100vh;
    width: 100%;
    position: relative;
  }
  .position{
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
  }
</style>
<body>
  <div class="box">
　　 <input type="text"/>
    <div class="position">
      底部
    </div>
  </div>
</body>

　　

　　这样的代码，我们可以看到底部的position会随着 input 输入，高度变化而上来 

　　这样有可能底部会挡住元素

 

2、解决方法

<style>
  .box{
    min-height: 100vh;
    width: 100%;
    position: relative;
  }
  .position{
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
  }
</style>
<body>
  <div class="box">
    <input type="text">
    <div style='height: 400px'></div>
    <div class="position">
      底部
    </div>
  </div>
</body>

　　

　　在里面添加一个元素，使得内容的高度大于 输入时候 屏幕的高度

 

　　这样就解决了

 

 

 

　　　

 

posted @ 2018-10-23 17:12  小结巴巴吧  阅读(2432)  评论(0)  编辑  收藏  举报