使用height:100%时<div>元素无法填满剩余屏幕的问题排查

问题出在height:100%的生效逻辑——它需要父元素有明确的高度值，而且当前布局没有把侧边栏和主内容放在一个能分配剩余空间的容器里。按下面的步骤修改即可：

核心修改点 #

• 让html和body占满视口高度，并用flex垂直布局，把页面分成顶部导航和下方内容区
• 新增一个容器包裹侧边栏和主内容，让这个容器占满导航栏下方的剩余高度
• 用flex布局让侧边栏和主内容并排，侧边栏自动填充容器高度，溢出时显示滚动条

修改后的完整代码 #

CSS部分 #

html, body {
  margin: 0;
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
}

.header {
  overflow: hidden;
  background-color: #404040;
  padding: 10px 10px;
  height: 36px;
  text-align: center;
}

.header-right {
  float: right;
  padding: 0px 0px;
}

.header a {
  float: left;
  color: #ffffff;
  text-align: center;
  padding: 5px 10px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
  align-content: center;
}

.header a:hover {
  background-color: #333333;
  color: #ffffff;
}

/* 新增内容容器，占满header下方剩余高度 */
.content-wrapper {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.leftmain {
  width: 325px;
  padding: 0px 10px;
  background-color: #333333;
  overflow-y: auto; /* 只有内容溢出时显示垂直滚动条 */
}

.leftmain p {
  color: #ffffff;
  text-align: left;
  padding: 0px 10px;
  text-decoration: none;
  font-size: 12px;
  line-height: 25px;
  border-radius: 4px;
  background-color: #333333;
  width: 300px;
  margin: 0;
}

.leftmain p:hover {
  background-color: #404040;
  color: #ffffff;
}

.main {
  flex: 1; /* 占满剩余宽度 */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 5px;
}

.card {
  width: 400px;
  height: 160px;
  background-color: #404040;
  border: 1px solid #404040;
  border-radius: 4px;
  margin-top: 20px;
}

.toptext {
  width: 400px;
  height: 45px;
  color: #ffffff;
  background-color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 4px;
  text-align: left;
}

.toptext h1 {
  font-size: 20px;
  margin-left: 0px;
  margin-top: 1px;
  color: #404040;
}

.toptext p {
  font-size: 12px;
  margin-left: 0px;
  margin-top: -10px;
  color: #404040;
}

HTML部分 #

<div class="header">
  <a href="#test" id="nameOfCompany">📄 My Paper Company</a>
  <div class="header-right">
    <a href="#settings">Settings</a>
    <a href="#contact">Contact</a>
    <a href="#donate">Donate</a>
  </div>
</div>
<!-- 新增内容容器 -->
<div class="content-wrapper">
  <div id="leftmain" class="leftmain">
    <p id="button" onclick='show("htpmain")'>📢 How To Play</p>
    <!-- 可以多加几个p标签测试滚动效果 -->
    <p>测试项1</p>
    <p>测试项2</p>
    <p>测试项3</p>
    <p>测试项4</p>
    <p>测试项5</p>
    <p>测试项6</p>
    <p>测试项7</p>
    <p>测试项8</p>
    <p>测试项9</p>
    <p>测试项10</p>
    <p>测试项11</p>
    <p>测试项12</p>
  </div>
  <div id="htpmain" class="main">
    <div class="toptext">
      <h1>
        📢 How To Play
      </h1>
      <p>This guide will get you start the game and will be helpful to grasp everything you need to do.
      </p>
    </div>
    <div class="card"></div>
  </div>
</div>

说明 #

• html, body设置height:100%并垂直flex布局，确保页面能占满视口
• content-wrapper用flex:1自动填充header下方的剩余空间，同时内部用flex让侧边栏和主内容横向排列
• leftmain去掉了height:100%，因为flex子项会自动继承容器高度，overflow-y:auto保证内容溢出时仅侧边栏滚动，不影响主内容
• 移除了原HTML中的<center>标签，改用flex布局实现主内容居中，更符合现代布局规范

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