Home

Make element height full page

I am using some material-ui for my page design. I have several grid elements and they load as per random picks of menu: enter image description here

Yellow colored grid is the menu. 1,2 and 3 are options for it. Every option is different page (url) but menu is the same in all of them and it is imported in them. Every different page has different height – for example selected option in example (1) is with very small height. But option 2 has is very long and height becomes over 100vh. I added for my menu (yellow colored) a height of 100vh but it is becoming too short when I choose option 2: enter image description here

as you can see the red lines indicates the end of the Menu. How can I make this menu to fill page to the bottom as height: "100vh" is working only for smaller pages.

Asked on July 16, 2020 in CSS.
Add Comment
Cancel
2 Answer(s)

Try adding height: 100% to your yellow area css..

.sidenav {   height: 100%;   --   -- }
Cancel
Answered on July 16, 2020.
Add Comment
Cancel

height: 100%

or use flexbox, so you’ll have

<div class="whole-page">   <div class="sidebar">   </div>   <div class="content">   </div> </div> 
.whole-page {   display: flex; }

https://codepen.io/agakesik/pen/NWxYQJY

and it will automatically use full height

Cancel
Answered on July 16, 2020.
Add Comment
Cancel

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.