Menu
I’m using a grid display on my main DIV class is (page-content).
On the first column I have a sidebar menu. Class name ‘sidebar’ and it’s height set to 100%.
In the second column I have my website content in a class called ‘content’. If my content inside my second column extends the main DIV ‘page-content’ my ‘sidebar’ element doesn’t grow with it to be a 100% page height.
Here’s my sidebar class
“`
grid-area: menu;
background: #2F323A;
padding-top: 30px;
margin-top: 60px;
position: absolute;
left:0;
width: 250px;
height: 100%;
transition: 0.5s;
transition-property: left;
box-sizing: border-box;
Here’s my content class
“`
color: #FFF;
grid-area: body;
grid-column: 1 / 3;
margin-left: 250px;
padding: 2em;
align-items: center;
justify-self: center;
transition: 0.5s;