为侧边栏和主要内容创建高度时出现问题

Question

我正试图为我的管理页面创建侧边栏和主要内容的高度，但由于某种原因，它只为顶部创建高度，就在我的标题之后，而不应用于右侧、左侧或底部，因此我无法将任何css应用于我的侧边栏和主内容。我正在学习本教程https://youtu.be/kGzwvOFUewY(16:00是我努力实现的目标(。我的代码和他的完全一样，但由于某种原因仍然无法工作，所以我很困惑。

这是我的结果。

这就是我正在努力实现的目标。

我的HTML是：

<div class="admin-wrapper">
<div class="left-sidebar">
</div>
<div class="admin-content"></div>
</div>

CSS是：

.admin-wrapper{
display: flex;
height: calc(100% - 66px);
}
.admin-wrapper .left-sidebar{
flex: 2;
height: 100%;
border: 1px solid red;
background: #a94442;
}
.admin-wrapper .admin-content{
flex: 8;
height: 100% ;
border: 1px solid green;
}

Answer 1

你可以这样做。。。

.admin-wrapper{
display: flex;
height: 100vh;
flex-direction: column;
}
.adminHeader {
display: flex;
width: 100%;
background: blue;
color: #fff;
padding: 10px;
}
.bodyContent {
display: flex;
height: calc(100vh - 50px);
}
.admin-wrapper .left-sidebar{
height: 100%;
border: 1px solid red;
background: #a94442;
width: 25%;
}
.admin-wrapper .admin-content{
height: 100% ;
border: 1px solid green;
}

<div class="admin-wrapper">
<div class="adminHeader">Admin Header</div>
<div class="bodyContent">
<div class="left-sidebar">
</div>
<div class="admin-content"></div>
</div>
</div>

Answer 2

如果您使用

.admin-wrapper{
height: calc(100vh - 66px);
display: flex;
}

剩下的可能和你已经有的一样

现场考试