固定div不会被键盘上推

Question

我试图将一个底部div，正如它的名字所说，固定在div的最底部，并且当键盘打开时它应该被向上推（在键盘上方，因为现在视口高度应该改变）。然而，问题是这并没有发生。我也知道这与很多人的问题完全相反，但不知何故，这并没有发生在我身上。

我做错了什么？

    <div className="custom-modal">
      <div className="modal-content">
        {/* Your modal content goes here */}
        <h2>Title</h2>
        <p>Modal body content</p>
        <input type="text" placeholder="Enter text" />
      </div>
      <div className="bottom-div">
        {/* Your bottom div content */}
        <button>Submit</button>
      </div>
    </div>

.custom-modal {
  position: relative;
 
}



.bottom-div {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff; 
 
}

在此处检查此代码笔

Answer 1

您需要将

bottom

值设置为

0

，以便它固定在视口的底部。

.bottom-div {
  position: fixed;
  bottom: 0;    /* Corrected this value */
  width: 100%;
  background-color: #fff;
}

此更改将确保 Bottom-div 固定到视口的底部。