html - 这个带有垂直弹性框和动态删除元素的 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>

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

如果我动态删除或隐藏页脚（通过单击 codepen 上的按钮），正文内容将不会呈现在页脚所在的位置。这似乎只发生在 chrome 中。

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

它在 chrome 中的显示方式

它应该如何显示（firefox）

标签： htmlcssgoogle-chrome

Answer 1

position毕竟，来自 CSS 的+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>