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>
在里面添加一個元素，使得內容的高度大於 輸入時候 屏幕的高度
這樣就解決了