Bootstrap div溢出父容器：实现类iframe滚动文本编辑器遇页面滚动问题

嘿，我太懂你遇到的这个坑了——明明想让编辑器容器自己滚动，结果整个页面跟着跑，容器还被内容撑得老高。咱们来快速搞定它！

问题根源 #

核心原因是你的灰色编辑器容器没有被明确限制高度，也没有正确启用内部滚动机制，导致它跟着内容无限扩张，最终把整个页面的滚动条给“拽出来”了。

具体解决方案 #

下面是一步到位的代码示例，直接套用就能解决：

1. 先搞定全局基础样式

首先要确保页面根元素（html和body）的高度占满视口，同时禁止页面本身滚动：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 关键：让页面本身不产生滚动 */
}

2. 设置编辑器容器样式

给灰色容器固定高度（占视口95%），并开启垂直滚动：

.editor-container {
  height: 95vh; /* 直接用vh单位，相当于视口高度的95%，适配所有设备 */
  overflow-y: auto; /* 内容超出时只在容器内显示垂直滚动条 */
  background-color: #eee; /* 你的灰色背景 */
  padding: 10px;
  box-sizing: border-box; /* 把内边距算进容器高度里，避免超出视口 */
}

小tip：如果不想用vh，也可以用height: 95%，但前提是它的父元素（比如body）必须设置了height: 100%，否则百分比高度会失效。

3. 文本内容容器样式

内部的白色文本容器不需要设置高度，让内容自然撑开就行：

.text-content {
  background-color: #fff;
  padding: 15px;
}

对应的HTML结构

<div class="editor-container">
  <div class="text-content">
    <!-- 这里放你的大量文本内容 -->
  </div>
</div>

额外注意事项 #

• 检查有没有其他元素的默认margin/padding（比如body的默认margin），这些可能会导致页面出现意外滚动，所以第一步里的margin: 0很重要。
• 如果编辑器容器嵌套在其他父元素里，一定要确保父元素也有明确的高度（比如height: 100%），否则子元素的百分比高度会不生效。用vh单位的话就没这个烦恼~

这样设置之后，你的编辑器容器就会牢牢占住视口95%的高度，内容再多也只会在容器内部滚动，整个页面不会跟着动啦！调整不同设备的视口大小也能完美适配。

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