对于这个带有垂直弹性框和动态删除元素的 chrome 错误，是否有解决方法?

Question

如果你看看这个代码片段

$(document).ready(function() {
$(".inner-content").text("test ".repeat(5000));
});
function test(){
$(".footer").remove();
}

.wrapper {
height: 100vh;
}
.header{
height: 50px;
min-height: 50px;
background-color: pink;
}
.content{
background-color: lightblue;
overflow: auto;
}
.footer{
height: 50px;
min-height: 50px;
background-color: pink;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex flex-column wrapper">
<div class="header">
<button onclick="test()">Click Me</button>
</div>
<div class="flex-grow-1 content">
<div class="inner-content">

</div>
</div>
<div class="footer"></div>
<div>

我有一个垂直的弹性框，带有设置高度的页眉和页脚。加上一个填充空间并在溢出时滚动的身体。

如果我动态删除或隐藏页脚(通过单击代码笔上的按钮(，正文内容将不会呈现在页脚以前所在的位置。这似乎只发生在铬中。

有解决方法/修复方法吗？

它在镶边中的显示方式

它应该如何显示(火狐(

Answer 1

来自CSS 的position+z-index可能不需要在隐藏页脚时触发。

$(document).ready(function() {
$(".inner-content").text("test ".repeat(5000));
});
function test(){
$(".footer").remove();
}

.wrapper {
height: 100vh;
}
.header{
height: 50px;
min-height: 50px;
background-color: pink;
}
.content{
background-color: lightblue;
overflow: auto;
/* chrome*/
position:relative;
z-index:1;
}
.footer{
height: 50px;
min-height: 50px;
background-color: pink;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex flex-column wrapper">
<div class="header">
<button onclick="test()">Click Me</button>
</div>
<div class="flex-grow-1 content">
<div class="inner-content">

</div>
</div>
<div class="footer"></div>
<div>

或经典：背面可见性：隐藏

$(document).ready(function() {
$(".inner-content").text("test ".repeat(5000));
});
function test(){
$(".footer").remove();
}

.wrapper {
height: 100vh;
}
.header{
height: 50px;
min-height: 50px;
background-color: pink;
}
.content{
background-color: lightblue;
overflow: auto;
/* chrome*/
backface-visibility:hidden;
}
.footer{
height: 50px;
min-height: 50px;
background-color: pink;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex flex-column wrapper">
<div class="header">
<button onclick="test()">Click Me</button>
</div>
<div class="flex-grow-1 content">
<div class="inner-content">

</div>
</div>
<div class="footer"></div>
<div>

Answer 2

您需要强制重绘内容。您可以使用如下所示的显示/隐藏来执行此操作。您可以注意到，调整浏览器大小将解决此问题，因为它也会重绘内容。

$(document).ready(function() {
$(".inner-content").text("test ".repeat(5000));
});
function test(){
$(".footer").remove();
$('.content').hide().show(0);
}

.wrapper {
height: 100vh;
}
.header{
height: 50px;
min-height: 50px;
background-color: pink;
}
.content{
background-color: lightblue;
overflow: auto;
}
.footer{
height: 50px;
min-height: 50px;
background-color: pink;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex flex-column wrapper">
<div class="header">
<button onclick="test()">Click Me</button>
</div>
<div class="flex-grow-1 content">
<div class="inner-content">

</div>
</div>
<div class="footer"></div>
<div>