100% height using fixed position - html

Question

I'm using position: fixed; to make a div adjusting to different screen sizes. The height is set to 100% in this simplified example to make the div "example" always take up the whole height of the screen. What I want to do is making space both over and under this div and I'm doing so by using position: fixed; and top: 100px; bottom: 100px;
The problem is that the code only runs top: 100px; not both. Is there any way around this problem?
Fiddle
HTML
<div id="example"></div>
Css
#example {
background-color: #333;
width: 500px;
height: 100%;
position: fixed;
bottom: 100px; /* This is clearly not working, how do I do this with absolute/fixed position? */
top: 100px;
}
EDIT
And if I set the height using this function istead of setting height in css to 100%. How do I do then?
$(document).ready(function() {
function setHeight() {
windowHeight = $(window).innerHeight();
$('#example').css('min-height', windowHeight);
};
setHeight();
$(window).resize(function() {
setHeight();
});
});

Answer 1

You have to remove the height: 100%. The browser will calculate the distance between the top and bottom value and create the height you need.
new code:
#example {
background-color: #333;
width: 500px;
position: fixed;
bottom: 100px; /* This is clearly not working, how do I do this with absolute/fixed position? */
top: 100px;
}
JSFiddle

Answer 2

You seem to misunderstand the box model. When you say "height: 100%" it means that the height of the element will be the same number of pixels as the containing element with layout. Setting top:100px will result in moving the box down 100px, but it will not affect the height of the box. Thus, 100px of the box will overflow the viewport. This is the same if you specify bottom:100px, except that top 100px of the box will underflow the viewport.
Remove height 100% and the top and bottom instructions will calculate the element height.
#example {
background-color: #333;
width: 500px;
position: fixed;
bottom: 100px; /* This is clearly not working, how do I do this with absolute/fixed position? */
top: 100px;
}

Answer 3

Just try this instead of height: 100%, it would be enough; http://jsfiddle.net/xd2j2shm/1/
height: calc(100% - 200px);

Answer 4

EDIT: I like RMo's answer more. It is simpler. That being said, they both work.
To clarify, it sounds like you want the div to cover 100% of the height, minus for 100px at the top and 100px at the bottom.
The way to do this is relatively new. You need to use the calc value for your height property:
#example {
background-color: #333;
width: 500px;
height: calc(100% - 200px);
position: fixed;
top: 100px;
}
It has wide support in modern browsers: http://caniuse.com/#feat=calc