响应式About页面问题：缩小浏览器窗口时文本Div超出页面

嘿，我看你在做响应式About页面时遇到了窗口缩小后文本Div超出页面的问题，咱们来拆解下问题根源，然后一步步搞定它～

问题根源分析 #

从你给出的代码来看，有两个关键设置导致了溢出问题：

1. body的overflow: hidden：这个属性会直接隐藏所有超出视口的内容，窗口缩小后文本高度超过固定容器高度时，溢出部分直接被切掉，还没法滚动查看。
2. #content的固定高度2457px：响应式布局里绝对不能用固定高度，窗口变窄后文本换行导致内容高度增加，固定高度的容器根本装不下，自然就溢出了。

具体修复方案 #

我给你调整了CSS代码，同时优化了一些细节提升响应式体验：

1. 基础布局修复（修改body和#content）

body {
  margin: 0;
  font-family: 'Share Tech Mono', monospace;
  /* 只隐藏水平方向溢出，保留垂直滚动能力 */
  overflow-x: hidden;
}

#content {
  width: 100%;
  /* 用min-height保证至少占满屏幕，高度随内容自动撑开 */
  min-height: 100vh;
  background-image: url('../images/wallpaper.jpg');
  /* 让背景图自适应容器，避免拉伸变形 */
  background-size: cover;
  background-position: center;
  /* 加内边距避免内容贴边，box-sizing确保内边距不增加容器宽度 */
  padding: 2rem;
  box-sizing: border-box;
}

2. 文本容器优化（调整#textarea）

#textarea {
  /* 限制最大宽度，避免宽屏上文本过长影响阅读 */
  max-width: 800px;
  /* 水平居中，让文本块更规整 */
  margin: 0 auto;
  /* 加半透明背景提升文本可读性 */
  background-color: rgba(255, 255, 255, 0.8);
  padding: 1.5rem;
  /* 优化行高，提升阅读体验 */
  line-height: 1.6;
  border-radius: 8px;
}

修复效果说明 #

• 窗口缩小后，页面会自动出现垂直滚动条，所有文本内容都能通过滚动查看，不会被隐藏。
• #content的高度会随着文本内容自动调整，再也不会出现固定高度装不下内容的情况。
• 文本容器在不同屏幕宽度下都能保持合适的阅读宽度，半透明背景也让文本和背景图更好地融合。

你的HTML代码可以保持不变，如果想更语义化，可以把外层的div#content换成section，不过这不是必须的，不影响功能。

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