CODEWITHSUNDEEP
htmlcss
Akerman
Akerman

Reputation: 5

100% height using fixed position

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();
  });
});

Upvotes: 0

Views: 2696

Answers (4)

Berk Kaya
Berk Kaya

Reputation: 470

Just try this instead of height: 100%, it would be enough; http://jsfiddle.net/xd2j2shm/1/

height: calc(100% - 200px);

Upvotes: 0

thesmart
thesmart

Reputation: 3073

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; 
}

Upvotes: 0

Rob Monhemius
Rob Monhemius

Reputation: 5144

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

Upvotes: 5

dave mankoff
dave mankoff

Reputation: 17769

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

Upvotes: -1

Related Questions