CODEWITHSUNDEEP
htmlcsslayoutsass
Polecalex
Polecalex

Reputation: 373

Why div isn't going full height?

I'm trying to make a sidebar which is the height of the whole page, it is nested within a div called main.

The code is:

.main {
   display: flex;
   overflow-y: hidden;
  }
 
.sidebar {
    height: 100%;
    background: #212121;
    }

.navbar {
     margin: 0;
     padding: 0;
    }
<div class="main">
  <div class="sidebar">
    <ul class="navbar">
      ...
    </ul>
  </div>
</div>

The div defaults to the size of the unordered list, which is 200px; although I can change it to another size, for example "height: 500px", I do not want to do that, because of different screen sizes.

Is there any way to do this without using viewpoint sizes, something like height: 100%, but that actually works?

Upvotes: 1

Views: 76

Answers (1)

sourdoughdetzel
sourdoughdetzel

Reputation: 664

If you always want your .main to be the full height (and width) of the window, you can position that absolutely and stretch it.

 .main {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    display: flex;
    overflow-y: hidden;
}

Depends what you are looking for in regard to the .main div.

Upvotes: 3

Related Questions