height: 100% background sidebar doesn't work

Question

how can I add background height: 100% for aside?

aside,
.side-nav {
    width: 250px;
    float: left;
    margin-right: 15px;
    background-color: #2b2b2b;
}

How can I fix the sidebar (aside)?

Answer 1

With CSS3 you can actually use the "vh" designation (based on viewport height).

For your example, you would just add "height: 100vh" to your css.

Answer 2

I have created a small example. Please review jsfiddle link below.

<https://jsfiddle.net/whfukm5p/>

Answer 3

I think what you need is a navigation that is fixed rather than float.

aside, .side-nav { width: 250px; margin-right: 15px; background-color: #2b2b2b; position: fixed; left: 0; top: 0; bottom: 0; overflow: auto; }

Height is a relative value based on the parent element, but since Window doesn't have a default height, relative height on elements can't be used.

If you insist in using relative height, you will need to set it via javascript or give it a default value.