如何用CSS去除页面底部的神秘空白区域？

以下是针对你的Bootstrap+D3网页底部空白的具体修复方案：

1. 重置根元素高度与默认边距 #

仅设置min-height:100%无法让html和body完全占满视口，还需清除默认边距并设置明确高度：

html, body {
  height: 100%;
  margin: 0;
}

2. 清除body的底部内边距 #

你的现有CSS中body设置了padding-bottom:20px，这是底部空白的直接来源之一，将其改为0：

body {
  padding-left: 3vh;
  padding-top: 3vh;
  padding-bottom: 0; /* 移除底部内边距 */
}

3. 移除Bootstrap容器的默认底部外边距 #

Bootstrap的.container类默认带有margin-bottom:1rem，会额外产生底部空白，覆盖该样式：

.container {
  margin-bottom: 0;
  min-height: calc(100% - 3vh); /* 减去body的顶部内边距，让容器填满剩余视口高度 */
}

4. 按需调整内容区域的内边距 #

检查#poemTxt的padding-bottom:10vh，如果该内边距过度导致留白，可根据需求缩小数值：

#poemTxt {
  padding-left: 15vh;
  padding-bottom: 2vh; /* 缩小底部内边距，避免多余空白 */
}

完成以上修改后，页面底部的空白即可消除。核心是确保根元素占满视口，同时清除所有不必要的内边距和外边距。

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