Full height div失效：100%高度左侧栏布局实现求助

我之前也碰到过一模一样的问题！要实现这种全屏高度的左右分栏布局，核心是要确保父元素的高度被正确设置——因为height: 100%是相对于父元素的高度来计算的，如果父元素没有明确的高度值，子元素的100%高度就会失效。

下面给你两种可行的解决方案：

方案一：传统浮动布局 #

这种方法兼容性很好，适合需要支持旧浏览器的场景：

<!DOCTYPE html>
<html>
<head>
<style>
/* 先给根元素设置全高，清除默认边距 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 左侧侧边栏：固定宽度+100%高度，左浮动 */
.sidebar {
  width: 300px;
  height: 100%;
  background-color: #f5f5f5;
  float: left;
}

/* 右侧内容区：用margin-left避开侧边栏，同时设置100%高度 */
.main-content {
  height: 100%;
  background-color: #e5e5e5;
  margin-left: 300px;
}
</style>
</head>
<body>
<div class="sidebar">左侧侧边栏</div>
<div class="main-content">右侧内容容器</div>
</body>
</html>

方案二：Flexbox布局（推荐） #

这是现代前端更常用的方案，代码更简洁，不用处理浮动的各种坑，还能轻松实现响应式调整：

<!DOCTYPE html>
<html>
<head>
<style>
/* 同样先给根元素设置全高，清除默认边距 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 用flex容器包裹两个子元素，设置全高 */
.container {
  display: flex;
  height: 100%;
}

/* 左侧侧边栏：固定宽度即可，flex会自动拉伸高度 */
.sidebar {
  width: 300px;
  background-color: #f5f5f5;
}

/* 右侧内容区：用flex:1占据剩余所有宽度 */
.main-content {
  flex: 1;
  background-color: #e5e5e5;
}
</style>
</head>
<body>
<div class="container">
  <div class="sidebar">左侧侧边栏</div>
  <div class="main-content">右侧内容容器</div>
</div>
</body>
</html>

关键注意点： #

• 必须给html和body设置height: 100%，否则子元素的height: 100%没有参照标准
• 清除html和body的默认margin和padding，避免出现不必要的滚动条或间隙
• 浮动布局如果后续添加内容导致父元素塌陷，可以给父容器添加overflow: hidden来清除浮动

试试上面的方法，应该就能解决你的全屏高度失效问题啦！个人更推荐Flexbox方案，代码更易维护，适配性也更强。

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