使 div 填充所有浏览器高度而没有子 div 溢出父答案

【问题标题】：Make div fill all browser height without child div overflow parent使 div 填充所有浏览器高度而没有子 div 溢出父
【发布时间】：2018-05-29 15:14:14
【问题描述】：

我遇到了 div 高度的问题。

我有这样的事情：

.navbar {
  border: 1px solid red; //Just to show area
  height: 70px;
 }
 
 .main {
  height: calc(100vh - 70px);
 }
 
.sidebar {
  border: 1px solid yellow;
 }
 
.content {
  border: 1px solid green;
 }

<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>

当内容短于浏览器高度时，我希望主 div 及其子项填充所有浏览器。当内容高于浏览器时，我希望主和侧边栏 div 与带有滚动条的内容 div 一样高。

但我不能让这两种情况起作用。

1 - 我将导航栏高度设置为 70px 并使用 calc 设置主高度，以便主 div 填充所有浏览器高度。但是当内容 div 高于浏览器高度时，它会溢出其父级，侧边栏不会跟随内容高度。

像这样：

2 - 当我不设置这些高度时，当内容高于浏览器时它可以正常工作。主 div 和侧边栏与内容 div 一样高。但是当内容很短时，主 div 不会填满整个浏览器高度。

像这样：

我阅读了很多答案、帖子、博客，我所做的一切都导致一个案例有效，但另一个无效。

我该怎么办？

【问题讨论】：

遵循引导规则 .. 容器内的行
你可能想看看css grid - 这里有一个很好的开始方法：css-tricks.com/snippets/css/complete-guide-grid - 它允许你使用像1fr这样的单位（所有请释放空间！)
@TemaniAfif 很高兴知道。我认为将它们放在同一个 div 中是有效的。所以它在容器内是行的吗？
是容器内的行，那么您使用的是依赖于 flexbox 的引导程序 V4，因此如果您阅读文档并看到实用程序类 getbootstrap.com/docs/4.0/utilities/flex，您想要实现的目标很容易>
我正在使用引导网格系统。我想做类似@somethinghere 所说的事情。我坚持使用 flexbox。什么时候使用 grid 更好，什么时候应该使用 flex，我感到困惑。

标签： html css

【解决方案1】：

刚刚从您的 css 代码中删除了注释并将 height 更改为 min-height 并且它可以工作。试试这个代码。

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

.main {
  min-height: calc(100vh - 70px);
}

.sidebar {
  border: 1px solid yellow;
}

.content {
  border: 1px solid green;
}

【讨论】：

乐于助人，继续编码