CSS标签页开发：如何让absolute定位元素占据正常高度空间

设置了position: absolute的元素会脱离正常文档流，父级.contents容器计算自身高度时，只会统计处于正常文档流内的第一个标签内容的高度，不会纳入其他绝对定位的长内容高度。因此无论切换到多长的标签内容，容器高度始终等于最短的第一个内容的高度，下方的提交按钮自然会覆盖在超出容器高度的长内容上。

这个方案完全保留「以第一个标签内容宽度作为容器基准宽度」的现有逻辑，不需要改动宽度适配部分，只需要补全高度适配的逻辑即可：

1. 调整CSS样式，去掉单独给第二个标签写的.content2特殊定位规则，统一管理所有内容块的定位：

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tabs {
  display: flex;
  width: 100%;
}

.tab {
  flex-basis: 50%;
  width: 200px;
  padding: 20px;
  border: none;
  cursor: pointer;
}

.tab:nth-child(1) {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.tab:nth-last-child(1) {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

.tab:hover {
  background-color: #ddd;
}

.tab.active {
  background-color: #ccc;
}

.contents {
  position: relative;
  width: 100%;
  transition: height .25s ease;
}

.content {
  margin-top: 20px;
  width: 100%;
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s;
  position: absolute;
  top: 20px;
  left: 0;
}

.content.active {
  visibility: visible;
  opacity: 1;
  position: relative;
  top: 0;
}

.btn {
  margin-top: 20px;
  padding: 20px 50px;
  border-radius: 20px;
  border: 1px solid #ccc;
  cursor: pointer;
}

2. 调整JS逻辑，每次标签切换后动态更新内容容器的高度，让容器高度始终匹配当前显示的内容高度，HTML结构不需要改动，只替换script标签内的逻辑即可：

const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.content');
const contentsWrap = document.querySelector('.contents');

// 统一更新容器高度的方法
function updateContentHeight() {
  const activeContent = document.querySelector('.content.active');
  // 20是内容块的上边距值，和CSS保持一致
  contentsWrap.style.height = activeContent.offsetHeight + 20 + 'px';
}

// 页面初始化时先设置一次默认高度，匹配第一个激活的标签
updateContentHeight();

function onTabClick() {
  tabs.forEach((tab) => tab.classList.remove('active'));
  contents.forEach((content) => content.classList.remove('active'));

  const contentIndex = this.dataset.content;
  this.classList.add('active');
  contents[contentIndex].classList.add('active');
  
  // 切换标签后更新容器高度
  updateContentHeight();
}

tabs.forEach((tab) => {
  tab.onclick = onTabClick;
});

这个实现逻辑下，父容器的宽度始终由默认处于正常流的第一个激活标签撑开，完全符合宽度基准要求；切换标签时容器高度会自动匹配当前显示内容的高度，下方按钮不会再出现覆盖内容的问题，增加的高度过渡动画还能让切换效果更顺滑。

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