Menu
I am trying to make a side navigation bar that has a position: fixed and a height: 100%, but when I try this there is always still space were you can see the background below and or above the div. And by the way, I also tried to make the height like 1000px but I still have the same problem.
HTML:
<div id='navbar'></div>
CSS:
#navbar {
background-color:black;
width:100px;
height:100%;
z-index:99;
position:fixed;
left:-10px;
bottom:10px;
}
JSFiddle
201
Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.
If you try to put an image inside a <div> element that has borders, you will see an extra white space (around 3px) at the bottom of image. It happens because image is an inline-level element so browser adds some whitespace under the baseline to adjust other inline elements.
Height % is based on it's parent (so you have to set every element above the target element to 100%) , there are a few workarounds to this though. For instance you can set it to height: 100vh; This will create the element to be 100% of your window height. Or you can use px instead.
The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.
I guess that you're setting bottom: 10px to push your #navbar to the top where you had that 10px spacing in the first place, which causes the same spacing in the bottom. You can force your element to stretch from start/end of it's parent height by applying top: 0; bottom: 0;(you should remove bottom: 10px;) to the #navbar element.
P.S. top: 0 is superfluous, however I've set it to demonstrate the concept.
JSFiddle
60
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
