如何在div的高度响应的情况下与页面底部保持特定距离

Question

}

目前我正在创建一个聊天机器人和聊天输入部分，当高度变化有时它会消失，它会离开屏幕，或者当手机屏幕很大时，它会从所需位置显示上面的输入。我尝试过 vh 和百分比方法，但不起作用

.chat-input
{
width: 304px;
height: 34px;
z-index: 1;
margin-bottom: 34px;
position:relative;
top:calc(10vh);
background-color: #F3F3F3;
border-radius: 50px;
}

供参考
()
()

只是我想要聊天输入和屏幕底部之间应该有一些特定的距离，该距离应该相同，例如 15 像素的边距。

Answer 1

使用位置固定，不要将 vh 单位与 top 组合

.chat-input {
    width: 304px;
    height: 34px;
    z-index: 1;
    position: fixed; /* Change from relative to fixed */
    bottom: 15px;    /* Distance from the bottom of the screen */
    left: 50%;       /* Center the input horizontally */
    transform: translateX(-50%); /* Adjust for exact centering */
    background-color: #F3F3F3;
    border-radius: 50px;
}