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

最新推荐文章于 2025-05-27 10:23:17 发布

原创最新推荐文章于 2025-05-27 10:23:17 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种常见的网页布局问题：当输入框内容增多导致页面滚动时，底部固定元素可能被遮挡。通过在布局中添加一个固定高度的占位元素，确保即使在输入框高度增加时，底部元素也不会被遮挡，从而提供更好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

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

　　这样就解决了