如何将Tab内容Div高度限制为左侧图片高度？

我来帮你搞定这个需求！要让右侧Tab内容高度和左侧图片保持一致，超出内容自动滚动，同时在小窗口下自动堆叠，我们可以通过优化Flex布局和添加关键样式来实现，具体如下：

核心思路 #

• 用纯Flex布局替代原有的Flex+Table-Cell混合写法，避免样式冲突
• 利用Flex的align-items: stretch特性（默认生效）让左右两列高度自动对齐
• 给Tab内容容器设置height: 100%和overflow-y: auto，实现内容超出滚动
• 添加媒体查询实现小窗口下的垂直堆叠

完整代码实现 #

CSS 样式 #

/* 基础容器布局 */
.col-container {
  display: flex;
  flex-wrap: wrap; /* 允许空间不足时换行 */
  margin: 0 auto;
  width: 100%;
}

/* 列样式 */
.col {
  flex: 1 1 50%; /*  flex-grow:1, flex-shrink:1, flex-basis:50% */
  padding: 10px;
  background: white;
  box-sizing: border-box; /* 确保padding不会撑大宽度 */
}

/* 图片自适应 */
.col img {
  max-width: 100%;
  height: auto; /* 保持图片比例，自动缩放 */
  display: block; /* 去掉图片下方的默认空白 */
}

/* Tab 按钮样式 */
.tab {
  margin-bottom: 10px;
}

.tablinks {
  padding: 8px 16px;
  cursor: pointer;
  background: #f1f1f1;
  border: none;
  outline: none;
  transition: background 0.3s;
}

.tablinks.active {
  background: #ccc;
}

/* Tab 内容容器：关键样式实现高度匹配与滚动 */
.tab-content-wrapper {
  height: calc(100% - 40px); /* 减去Tab按钮和内边距的高度，可根据实际调整 */
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
  padding-right: 5px; /* 避免滚动条覆盖文本 */
}

/* 隐藏未激活的Tab内容 */
.tabcontent {
  display: none;
}

/* 响应式堆叠：小窗口下垂直排列 */
@media (max-width: 768px) {
  .col {
    flex-basis: 100%; /* 每列占满宽度 */
  }
}

HTML 结构 #

<div class="col-container">
  <div class="col">
    <img src="https://wallpaperbrowse.com/media/images/4995_Sibl_9780307957900_art_r1.jpg" alt="示例图片">
  </div>
  <div class="col">
    <h2>Hello World</h2>
    <div class="tab">
      <button class="tablinks active" onclick="openTab(event, 'Home')">Home</button>
      <button class="tablinks" onclick="openTab(event, 'About')">About</button>
    </div>
    <!-- Tab内容容器，包裹所有Tab内容 -->
    <div class="tab-content-wrapper">
      <div id="Home" class="tabcontent" style="display:block">
        <p>Home内容，比较短</p>
      </div>
      <div id="About" class="tabcontent">
        <p>About内容，非常长的文本示例：</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
        <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
        <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
      </div>
    </div>
  </div>
</div>

JavaScript 切换Tab函数 #

function openTab(evt, tabName) {
  // 隐藏所有Tab内容
  let tabcontent = document.getElementsByClassName("tabcontent");
  for (let i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  // 移除所有按钮的active类
  let tablinks = document.getElementsByClassName("tablinks");
  for (let i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  // 显示当前Tab内容，标记按钮为active
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

关键样式说明 #

• flex: 1 1 50%：让每列默认占50%宽度，空间不足时自动收缩，空间充足时自动扩展
• tab-content-wrapper的height: calc(100% - 40px)：确保内容容器填满列的高度，同时减去Tab按钮和内边距的高度，避免内容溢出到容器外
• overflow-y: auto：当内容高度超过容器时，自动显示垂直滚动条
• @media (max-width: 768px)：在视口宽度小于768px时，将列设置为100%宽度，实现垂直堆叠

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