如何实现Div自适应浏览器高度且子元素不超出父容器？

这个问题其实是典型的**弹性布局（Flexbox）**适用场景，我们可以通过调整整体布局结构，同时满足“内容短时铺满视口”和“内容长时自适应高度并滚动”的需求。

问题根源分析 #

你之前的两种尝试各有局限：

• 设置main为calc(100vh -70px)是给它固定了最大高度，当content内容溢出时，main无法被撑开，导致sidebar无法跟随高度变化；
• 不设置main高度时，短内容下main没有足够的高度支撑，无法铺满视口。

解决方案：用Flexbox构建垂直布局 #

我们可以利用Flexbox的弹性特性，让页面的垂直结构（导航栏+主内容区）自动分配空间，同时保证侧边栏和内容区始终等高。

修改后的完整代码如下：

CSS 部分

html, body {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.navbar {
  border: 1px solid red;
  height: 70px;
}

.main {
  flex: 1; /* 自动填充导航栏下方的剩余空间 */
}

.sidebar {
  border: 1px solid yellow;
}

.content {
  border: 1px solid green;
}

HTML 部分

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<head></head>
<body>
<div class="navbar"> Navbar </div>
<div class="container-fluid main row">
  <div class="sidebar col-3"> Sidebar </div>
  <div class="content col-9"> 
    <!-- 这里可以添加测试内容，短内容时铺满，长内容时撑开 -->
  </div>
</div>
</body>
</html>

为什么这样有效？ #

1. 整体垂直布局：把html和body设置为flex-direction: column的弹性容器，高度设为100vh，让页面占满整个视口；
2. 导航栏固定高度：navbar保持70px高度，作为弹性子项占据顶部空间；
3. 主内容区弹性分配：main设置flex:1，意味着它会自动填充navbar下方的所有剩余空间——当content内容短时，main撑满剩余视口高度，sidebar因Bootstrap的row默认align-items:stretch特性，会和content一起铺满这个高度；
4. 长内容自适应：当content内容超过视口高度时，main会被内容撑开，整个页面（body）会出现滚动条，sidebar也会自动跟随content的高度变化，保持等高。

额外注意事项 #

• 移除了原来main的height:calc(100vh -70px)，避免固定高度限制布局弹性；
• Bootstrap 4的row类默认已经是display:flex，所以不需要额外给main添加display:flex（但如果需要兼容旧环境，加上也没问题）；
• 去掉了body的默认margin，避免出现不必要的留白。

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