Html Question posted in
Some basic documentation can be found here.

Html – height: calc(100vh – 76px); does not work properly

My left menu does not fill the entire page when other elements make it longer. Normally it works fine:
when site is full size

when site is full size

. But when i make it smaller there appears a blank:

smaller site, theres a blank below

enter image description here

width: 180px;
height: calc(100vh - 76px);
z-index: 700;
background-color: white;
padding: 20px 0;

display: flex;
flex-direction: column;
justify-content: space-between;

Theres "-76px" becasue of navbar above of this left menu, i tried min-height or 100% instead of 100vh but nothing works. Someone can fix it?

Tags:

2

Answers


  1. 0

    so i guess u are trying to make a sidebar, that way you can make the position property to be fixed. you can add this codes below:

    position: fixed;
top:0;
bottom:0;

    then readjust your codes so that other elements start after the sidebar.
    for proper clarity, please provide more code

    Login or Signup to reply.
  2. 0

    From your screenshots it’s clear that you have a sidebar and a content bar. You have a CSS rule which works properly if the content bar is smaller than the sidebar, but you have an issue when the content bar is greater than your sidebar.

    You can solve this problem via several ways, so you can choose the one that suits you best:

    • you could at page load measure the size of the content bar and if it’s larger than the sidebar, then adjust the sidebar’s size via Javascript
      • pro: easy, reliable
      • con: you use Javascript to fix a glitch
    • you could make your content bar be of the same height as your sidebar and have a vertical scroll bar
      • pro: easy, reliable
      • con: a scrollbar inside your content bar when needed

    See the example below:

    .sidebar {
    width: 20%;
    background-color: blue;
}

.content {
    width: 80%;
    background-color: yellow;
    overflow-y: auto;
}

.sidebar, .content {
    height: calc(100% - 76px);
}

body, html {
    width: 100%;
    height:100%;
    background-color: red;
    display: flex;
    padding: 0;
    margin: 0;
}
    <div class="sidebar"></div>
<div class="content">
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
<p>sdjfskljdfhsdlkjfhskfjhsdjfshsjkdfhsjkfhksdhfsjkhfskjfdsh</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search