如何防止文本溢出容器？200vh最小高度页面场景求助

嘿，我来帮你搞定这个问题！你要做的是一个最小高度200vh的页面，顶部是全屏图片，下方红色背景的文本区域不能让内容溢出对吧？我给你两种常用的解决方案，看哪种更适合你的需求：

方案1：文本超出时滚动（推荐） #

这种方式会让红色背景区域占据图片下方的所有剩余空间（因为页面最小200vh，图片占100vh，所以剩余至少100vh），如果文本内容太多，会自动出现滚动条，不会溢出容器。

先写HTML结构：

<body>
  <div class="fullscreen-image">
    <img src="your-image-url.jpg" alt="全屏展示的图片">
  </div>
  <div class="text-container">
    <!-- 这里放你的所有文本内容 -->
    <h2>标题</h2>
    <p>这里是你的文本内容，不管有多长，超出容器后都会自动出现滚动条...</p>
  </div>
</body>

然后是CSS代码：

/* 基础页面设置 */
body {
  min-height: 200vh;
  margin: 0; /* 清除浏览器默认的边距 */
  display: flex;
  flex-direction: column; /* 让图片和文本容器垂直排列 */
}

/* 全屏图片容器 */
.fullscreen-image {
  height: 100vh; /* 占满整个视口高度 */
  width: 100%;
  overflow: hidden; /* 防止图片超出容器 */
}

.fullscreen-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，同时填满整个容器，不会拉伸变形 */
}

/* 红色背景文本容器 */
.text-container {
  flex: 1; /* 自动占据图片下方的所有剩余空间 */
  background-color: red;
  padding: 2rem; /* 给文本加内边距，避免贴边 */
  overflow-y: auto; /* 文本超出时显示垂直滚动条 */
  box-sizing: border-box; /* 让内边距不会增加容器的总宽度/高度 */
}

方案2：文本超出时隐藏（适合固定高度场景） #

如果希望红色背景区域高度固定，超出的文本直接隐藏，可以用这个方案：

修改文本容器的CSS：

.text-container {
  background-color: red;
  padding: 2rem;
  width: 100%;
  max-height: calc(200vh - 100vh); /* 刚好等于页面剩余的100vh高度 */
  overflow-y: hidden; /* 超出部分隐藏 */
  box-sizing: border-box;
  white-space: normal; /* 确保文本自动换行，不会横向溢出 */
}

关键要点说明 #

• 使用flex布局可以轻松让文本容器占据剩余空间，不用手动计算高度
• object-fit: cover是保证全屏图片不变形的关键
• box-sizing: border-box能避免内边距把容器撑大，导致溢出页面
• 根据你的需求选择overflow-y: auto（滚动）或overflow-y: hidden（隐藏）即可

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