Home/ Questions/Q 7812303
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T04:27:44+00:00

So after reading Stack Overflow and the web, I’ve gathered that there are two

  • 0

So after reading Stack Overflow and the web, I’ve gathered that there are two main tricks to achieving 100% height:

  1. Set height:100% on both the HTML and BODY
  2. Set your element to have either:
    • height:100%, or
    • top:0, bottom:0, position:absolute

However, even with those tricks I’m having difficulty setting the height of an absolutely positioned DIV to a true 100%. I can get 100% of the viewport size, but if the user scrolls down at all it becomes apparent that the div doesn’t truly have 100% height.

I’ve made a simple JS Fiddle of the situation here:
http://jsfiddle.net/9FEne/

My question is: does anyone know any further tricks to get a true (ie. content-height, not viewport-height) 100% height absolutely positioned div?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Sorry, I missed the real question before and thought you wanted the window filled. If the issue is that the contents are longer than the window then what you need is to add position:relative to the body. http://jsfiddle.net/9FEne/7/

    What is happening is that when you absolutely position something it positions (and sizes) relative to the nearest positioned element. If you don’t tell it to position to the body then it will position to the window.

    • 0