如何用Flex布局实现动态面板切换时不偏移元素且收缩内容区高度

嘿，这个问题用Flex布局确实能完美解决！咱们只需要调整几行CSS，就能让通知面板切换时，content区域自动收缩高度，完全不会让下方的footer偏移。我直接给你修改好的代码，再解释下原理：

修改后的完整代码 #

HTML（无需修改） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class='wrapper'>
  <div class='notification-panel'> Some notification </div>
  <div class='content'>
    Scaling to screen using vh and vw <br>
    Line 2 <br>
    Line 3 <br>
    Line 4 <br>
    Line 5 <br>
    Line 6 <br>
    Line 7 <br>
    Line 8 <br>
    Line 9 <br>
    Line 10 <br>
    Line 11 <br>
    Line 12 <br>
    Line 13 <br>
    Line 14 <br>
    Line 15 <br>
    Line 16 <br>
    Line 17 <br>
    Line 18 <br>
    Line 19 <br>
    Line 20 <br>
    Line 21 <br>
    Line 22 <br>
    Line 23 <br>
    Line 24 <br>
    <button id="someBtn"> Click me </button>
  </div>
  <div class='footer'> Footer </div>
</div>

修改后的CSS #

/* 将wrapper设置为垂直方向的flex容器，占满视口高度 */
.wrapper {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.notification-panel {
  background: green;
  width: 100%;
  display: none;
  /* 通知面板仅占用自身内容高度 */
}

/* 让content区域自动填充容器剩余空间，支持收缩/扩展 */
.content {
  background: yellow;
  width: 100%;
  overflow: auto;
  flex: 1; /* 等价于 flex-grow:1, flex-shrink:1, flex-basis:0% */
}

.footer {
  background: blue;
  width: 100%;
  /* 页脚仅占用自身内容高度 */
}

JS（无需修改） #

$('#someBtn').on('click', function(){ $('.notification-panel').toggle(); });

核心原理说明 #

1. Flex容器设置：给.wrapper添加display: flex和flex-direction: column，让子元素垂直排列；同时设置height: 100vh确保容器占满整个视口高度。
2. 内容区域自适应：给.content设置flex: 1，这会让它自动填充容器中除了.notification-panel和.footer之外的所有剩余空间。
3. 动态高度调整：当.notification-panel显示时，它会占用自身内容的高度，.content会自动收缩对应的空间，完全不会挤压下方的.footer，完美实现你要的效果！

内容的提问来源于stack exchange，提问作者Ilya Berdzenishvili