CSS实现Div填充父容器且不溢出的布局问题求助

核心问题分析 #

1. navbar + wholePage 占满视口高度：当前wholePage设为100vh，但外部navbar会额外占据高度，导致整体超出视口。
2. innerBottomHalf 填充 bottomHalf（扣除内边距）：height:100%会忽略父元素的padding和内部文本高度，导致溢出。

修改后的代码 #

CSS 代码 #

/* 重置默认边距，避免浏览器默认样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  background-color: #f0f0f0;
}

li a {
  display: block;
  text-align: center;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
}

.wholePage {
  background-color: blue;
  display: flex;
  flex-direction: column;
  flex: 1; /* 自动占满navbar剩余的视口高度 */
}

.topHalf {
  background-color: purple;
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.bottomHalf {
  background-color: grey;
  flex: 1; /* 占满wholePage剩余高度 */
  padding: 10px;
  display: flex;
  flex-direction: column; /* 让内部文本和innerBottomHalf垂直排列 */
}

.innerBottomHalf {
  background-color: brown;
  flex: 1; /* 自动填充bottomHalf扣除padding和文本后的剩余空间 */
}

.topLeftHalf {
  background-color: green;
  flex: 1;
  padding: 10px;
}

.topRightHalf {
  background-color: orange;
  flex: 1;
  padding: 10px;
}

/* 关键：让body作为flex容器，navbar和wholePage垂直排列 */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

HTML 代码 #

<ul>
  <li><a>Solve</a></li>
  <li><a>About</a></li>
  <li><a>Other</a></li>
</ul>

<div class="wholePage">
  <div class="topHalf">
    <div class="topLeftHalf">
      This is the top left
    </div>
    <div class="topRightHalf">
      This is the top right
    </div>
  </div>

  <div class="bottomHalf">
    <div class="bottomText">This is the bottom half</div>
    <div class="innerBottomHalf">
      This is the inner bottom half
    </div>
  </div>
</div>

关键改动说明 #

1. 视口占满实现：

   • 给body设置min-height:100vh+display:flex;flex-direction:column，将navbar和wholePage作为flex子元素。
   • wholePage设置flex:1，自动填充navbar下方的剩余视口高度，无需手动计算navbar高度。

2. innerBottomHalf 填充实现：

   • 给bottomHalf设置display:flex;flex-direction:column，将内部文本和innerBottomHalf垂直排列。
   • innerBottomHalf设置flex:1，自动填充bottomHalf扣除padding和文本高度后的剩余空间，避免溢出。
   • 移除全局div的padding，改为按需给各容器添加，避免布局干扰；同时添加box-sizing:border-box确保padding不会增加元素总宽度/高度。

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