I just want to have a sidebar that will be 100% of window height, but nothing works except this:
#sidebarBack {
background: rgba(20, 20, 20, .3);
position: fixed;
width: 250px;
height: 100%;
left: 0;
}
I don't want to have position: fixed
, because I have horizontally scrollable content, so a fixed part would remain, well, fixed.
Is there any way to do such a thing, maybe with relative
or absolute
position?
Here's an quick Fiddle just for a test and explanation: JSFiddle
You can use the new and so-useful-I-can't-imagine-what-took-W3C-so-long vh
CSS unit:
height:100vh;
tl;dr - add html, body {height:100%;}
to your CSS.
Percentage values in CSS are inherited from some ancestor that already has height declared. In your case, you need to tell all parents of your sidebar to be 100% height. I'm assuming that #sidebarBack
is a direct child of body
.
Essentially, your code above is telling #sidebarBack
to be 100% height of its parent. Its parent (we are assuming) is body
, so you need to set height: 100%;
on body
as well. We can't stop there, however; body
inherits height from html
, so we also need to set height: 100%;
on html
. We can stop here, because html
inherits its properties from viewport
, which already has a declared height of 100%
.
This also means if you end up putting the #sidebar
inside another div
, then that div
also needs height:100%;
.
Here is an Updated JSFiddle.
Changed your CSS to:
html, body {
height:100%;
}
#sidebar {
background: rgba(20, 20, 20, .3);
width: 100px;
height: 100%;
left: 0;
float:left;
}
section#settings {
width:80%;
float:left;
margin-left:100px;
position:fixed;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With