HTML+CSS简历网站：左侧div无法铺满页面高度求助

核心问题拆解 #

1. html 和 body 默认自带 margin/padding，会导致页面出现留白，干扰视口高度的计算
2. 仅给 html 设置 height:100vh，body 不会自动继承该高度，内部元素无法基于视口高度渲染
3. 浮动元素（float:left）脱离文档流，父容器会出现高度塌陷，且浮动元素自身不会自动撑满父容器高度

具体修复方案 #

第一步：重置基础样式并确保根元素高度正确 #

在CSS最顶部添加以下代码，消除默认边距并让body继承视口高度：

html, body {
  margin: 0;
  padding: 0;
  height: 100%; /* 让body跟随html的视口高度 */
}

也可以用100vh替代100%，效果一致：

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
}

第二步：让左侧浮动栏撑满全高 #

给.left类添加高度设置，同时修复父容器的浮动塌陷问题：

.left {
  float: left;
  background-color: #你的背景色值;
  height: 100%; /* 与html/body的高度设置保持一致 */
  width: 30%; /* 按需设置宽度，比如占页面三分之一 */
}

/* 给body添加清除浮动的伪元素，避免高度塌陷 */
body::after {
  content: "";
  display: block;
  clear: both;
}

更优替代方案：用Flexbox替代浮动 #

如果不想处理浮动的塌陷问题，推荐用现代的Flexbox布局，稳定性更强：

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
}

body {
  display: flex; /* 将body设为弹性容器 */
}

.left {
  background-color: #你的背景色值;
  width: 30%; /* 按需设置宽度 */
  /* 无需float，自动撑满容器高度 */
}

.right-content {
  flex: 1; /* 右侧内容自动占满剩余页面宽度 */
}

额外调试技巧 #

• 临时给html、body添加边框（比如border:1px solid red），可以快速排查高度是否正确渲染
• 如果页面内容超过视口高度，想让左侧栏跟随内容滚动，把height:100%改成min-height:100vh即可

内容的提问来源于stack exchange，提问作者gem's_dad