Duck Duck - 6 months ago 11
HTML Question

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>





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

Is there anyway to do this, without using viewpoint sizes? something like height: 100% but.. which actually works?

Answer

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.