html - 为侧边栏和主要内容创建高度的问题

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

标签： htmlcss

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>