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>
在里面添加一个元素，使得内容的高度大于 输入时候 屏幕的高度
这样就解决了