如何实现高度统一的多面板切换组件？按钮固定不偏移

方法1：CSS Grid 重叠面板 + 透明度控制 #

把所有面板塞进网格的同一个单元格里，网格会自动用最高面板的高度作为容器高度。切换面板时不用display:none，而是通过调整透明度和指针事件来控制显示/隐藏——这样隐藏的面板仍会贡献高度，容器尺寸保持固定，按钮位置自然不会乱跑。

代码示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<h1>Grid 重叠面板方案</h1>
<div class="container grid-container">
  <div class="panel active" id="panel1">
    panel one
  </div>
  <div class="panel" id="panel2">
    panel two<br>
    which has two lines
  </div>
  <div class="panel" id="panel3">
    panel three<br>
    with even more content<br>
    that spans three lines
  </div>
</div>
<input type="button" id="next-button" value="Next button" />

.grid-container {
  background-color: blue;
  padding: 10px;
  display: grid;
  /* 所有面板放在同一个网格单元格 */
  grid-template-areas: "panel";
}

.panel {
  grid-area: panel;
  padding: 10px;
  /* 默认隐藏，除了active面板 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.panel.active {
  opacity: 1;
  pointer-events: auto;
}

#panel1 { background-color: purple; }
#panel2 { background-color: yellow; }
#panel3 { background-color: green; }

const panels = $('.panel');
const nextBtn = $('#next-button');
let currentIndex = 0;

nextBtn.click(function() {
  // 移除当前面板的active类
  panels.eq(currentIndex).removeClass('active');
  // 更新索引，循环切换
  currentIndex = (currentIndex + 1) % panels.length;
  // 添加新面板的active类
  panels.eq(currentIndex).addClass('active');
});

方法2：JavaScript 计算最大高度并设置容器最小高度 #

页面加载时临时显示所有面板，算出最高面板的高度，把这个值设为容器的min-height。这样不管切换哪个面板，容器高度都固定为最高面板的尺寸，按钮位置不会随内容变化移动。

代码示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<h1>JS 计算最大高度方案</h1>
<div class="container js-container">
  <div class="panel active" id="js-panel1">
    panel one
  </div>
  <div class="panel" id="js-panel2">
    panel two<br>
    which has two lines
  </div>
  <div class="panel" id="js-panel3">
    panel three<br>
    with even more content<br>
    that spans three lines
  </div>
</div>
<input type="button" id="js-next-button" value="Next button" />

.js-container {
  background-color: blue;
  padding: 10px;
  /* 由JS设置min-height */
}

.panel {
  padding: 10px;
  display: none;
}

.panel.active {
  display: block;
}

#js-panel1 { background-color: purple; }
#js-panel2 { background-color: yellow; }
#js-panel3 { background-color: green; }

$(document).ready(function() {
  const container = $('.js-container');
  const panels = $('.panel');
  let maxHeight = 0;

  // 临时显示所有面板计算高度
  panels.each(function() {
    $(this).show();
    const height = $(this).outerHeight();
    if (height > maxHeight) {
      maxHeight = height;
    }
    $(this).hide();
  });

  // 设置容器最小高度
  container.css('min-height', maxHeight + 'px');

  // 切换逻辑
  const nextBtn = $('#js-next-button');
  let currentIndex = 0;
  panels.eq(currentIndex).show().addClass('active');

  nextBtn.click(function() {
    panels.eq(currentIndex).hide().removeClass('active');
    currentIndex = (currentIndex + 1) % panels.length;
    panels.eq(currentIndex).show().addClass('active');
  });
});

方法3：Flexbox + 绝对定位隐藏 #

用Flexbox让容器高度由内容最高的面板决定，隐藏的面板通过绝对定位移出视觉区域，但元素仍留在DOM流中贡献高度。切换时只需要切换active类，控制面板的定位和可见性即可。

代码示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<h1>Flexbox + 绝对定位方案</h1>
<div class="container flex-container">
  <div class="panel active" id="flex-panel1">
    panel one
  </div>
  <div class="panel" id="flex-panel2">
    panel two<br>
    which has two lines
  </div>
  <div class="panel" id="flex-panel3">
    panel three<br>
    with even more content<br>
    that spans three lines
  </div>
</div>
<input type="button" id="flex-next-button" value="Next button" />

.flex-container {
  background-color: blue;
  padding: 10px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.panel {
  padding: 10px;
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.panel.active {
  position: static;
  opacity: 1;
  pointer-events: auto;
}

#flex-panel1 { background-color: purple; }
#flex-panel2 { background-color: yellow; }
#flex-panel3 { background-color: green; }

const flexPanels = $('.flex-container .panel');
const flexNextBtn = $('#flex-next-button');
let flexCurrentIndex = 0;

flexNextBtn.click(function() {
  flexPanels.eq(flexCurrentIndex).removeClass('active');
  flexCurrentIndex = (flexCurrentIndex + 1) % flexPanels.length;
  flexPanels.eq(flexCurrentIndex).addClass('active');
});

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