Question

我遇到div高度问题。

我有这样的事情：

＆＃13;

.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;
 }

＆＃13;

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

＆＃13;

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

但我无法使这两种情况发挥作用。

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

像这样：

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

像这样：

我读了很多答案，帖子，博客，我做的所有事情都导致一个案例有效但另一个没有。

我该怎么办？

Answer 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;
}

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

1 个答案: