两个连续排列的div如何无滚动条完整显示全部内容？

兄弟，我明白你的需求——两个div按顺序排列，不管里面数据多少都能完整展示，不会出现烦人的滚动条对吧？我帮你梳理几个关键的解决步骤，分两种常见的排列场景来说：

一、如果是上下依次排列（默认块级布局） #

这种情况最常见，只要确保div和它的父容器都没有限制高度的设置就行：

1. 移除固定高度：检查你的div有没有设置类似height: 300px的固定高度，把它删掉，让div默认用height: auto（自动适应内容高度）。如果需要最小高度可以用min-height: 200px，但不要用固定height。
2. 重置overflow属性：如果之前给div加了overflow: auto或者overflow: scroll，把它改成overflow: visible（这也是默认值，不写也可以，但如果之前改了要改回来）。
3. 检查父容器：如果div的父元素（比如body或者某个包裹容器）设置了固定高度或者overflow: hidden，也要把这些限制去掉，让父容器能随子元素高度自动扩展。

示例代码：

<!-- HTML结构 -->
<div class="container">
  <div class="content-box">这里是大量数据...（省略N行）</div>
  <div class="content-box">这里是另一堆大量数据...（省略N行）</div>
</div>

<!-- CSS样式 -->
<style>
/* 父容器不要固定高度，自适应子元素 */
.container {
  /* 不要设置height: xxxpx，也不要overflow: hidden */
  padding: 10px;
  border: 1px solid #eee;
}

/* 子div自适应内容高度，无滚动条 */
.content-box {
  /* 移除固定height */
  min-height: 100px; /* 可选：设置最小高度避免内容太少时太丑 */
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #ccc;
  /* overflow默认是visible，不用额外设置，如果之前改了就写overflow: visible */
}
</style>

二、如果是左右依次排列（横向布局） #

如果要两个div并排显示，用Flex布局最稳妥，同样要避免高度限制：

1. 父容器用Flex布局：给父容器设置display: flex，不要给父容器固定高度，让它自动适应最高的那个子div的高度。
2. 子div自适应高度：子div不要设置固定height，overflow保持visible，宽度可以用flex: 1让它们平分空间，或者设置固定宽度。

示例代码：

<!-- HTML结构 -->
<div class="flex-container">
  <div class="flex-item">左侧大量数据...（省略N行）</div>
  <div class="flex-item">右侧大量数据...（省略N行）</div>
</div>

<!-- CSS样式 -->
<style>
.flex-container {
  display: flex;
  gap: 15px; /* 两个div之间的间距 */
  padding: 10px;
  border: 1px solid #eee;
  /* 不要设置height: xxxpx，让它自适应子元素高度 */
}

.flex-item {
  flex: 1; /* 两个div平分父容器宽度 */
  min-width: 200px; /* 可选：设置最小宽度避免太窄 */
  padding: 10px;
  border: 1px solid #ccc;
  /* 不要固定height，overflow保持visible */
}
</style>

可能踩的坑 #

• 检查有没有元素设置了max-height，这个也会限制容器高度导致滚动条；
• 如果div内部有表格、iframe等元素，也要确保这些内部元素没有固定高度，让它们自适应内容；
• 浏览器默认的body margin/padding一般不影响，但如果设置了body { height: 100% }，也要去掉，否则body高度被限制在视口高度，内容多了会出现页面整体滚动（不是div内部的）。

按照这些步骤调整，你的两个div就能完整显示所有内容，不会出现内部滚动条啦！

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