CODEWITHSUNDEEP
htmlcss
Local dude
Local dude

Reputation: 25

Troubles with creating height for the sidebar and main content

I'm trying to create the height for the sidebar and main content for my admin page, but for some reason it only creates the height for the top, right after my header and doesn't apply on the right, left or bottom so i can't apply any css to my sidebar and main content. I'm following this tutorial https://youtu.be/kGzwvOFUewY (at 16:00 is what I'm trying to achieve). My code is identical to his but it still doesn't work for some reason so I'm confused.

This is my result.

And this is what I'm trying to achieve.

My HTML is:

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

</div>

<div class="admin-content"></div>
</div>

And CSS is:

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

Upvotes: 1

Views: 50

Answers (2)

Dami&#225;n
Dami&#225;n

Reputation: 72

that get accomplished if you use this:

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

the rest could be the same you already have

live exammple here

Upvotes: 0

Ishita Ray
Ishita Ray

Reputation: 666

You can do this like that way...

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

Upvotes: 1

Related Questions