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)?

Trust me, it has a parent. If you're doing it right the _"minimum"_ it would be is ``. — hungerstar, May 10 '16 at 18:13
[Working with the CSS `height` property and percentage values](http://stackoverflow.com/a/31728799/3597276) — Michael Benjamin, May 10 '16 at 18:14
Percentage height requires that the parent have a height set on it. The height can be set with any unit of measurement, but needs to be set. — hungerstar, May 10 '16 at 18:15
Define position to be absolute. Then set height (and width) as desired. — rby, May 10 '16 at 18:19

score 0 · Answer 1 · answered May 10 '16 at 18:17

0

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.

answered May 10 '16 at 18:17

jrpeters89

The OP likely wants the sidebar to be the height of the page which could vary based on content along with possible conditions like a min-height. You are setting the sidebar to a set height here. If a user has to scroll five times to view all of the page's content the sidebar would be long gone by the time they got to the bottom of the page. – hungerstar May 10 '16 at 18:36

score 0 · Answer 2 · answered May 10 '16 at 18:44

0

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

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

answered May 10 '16 at 18:44

Mukesh Ram

It Works, are how i can remove padding's? http://s8.hostingkartinok.com/uploads/images/2016/05/479979974461ba730f3f15cb0ef1c7c1.png – GodmanT May 10 '16 at 19:00
Can you please create jsfiddle live example? So I can guide you properly. – Mukesh Ram May 10 '16 at 19:08

score 0 · Answer 3 · answered May 10 '16 at 19:07

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.

3 Answers3