Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting 100% height on an absolutely positioned element when the content expands past the window size

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?

like image 668
machineghost Avatar asked Apr 13 '12 18:04

machineghost


People also ask

How can I make my height 100% work?

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.

How do I make my position absolute full screen?

position:absolute. You can also use position absolute as well as setting all the viewport sides (top, right, bottom, left) to 0px. This will make the div take the full screen.

How do you adjust the height of a viewport?

A simple way to solve this is to use the viewport percentage unit vh instead of %. One vh is defined as being equal to 1% of a viewport's height. As such, if you want to specify that something is 100% of the latter, use " height: 100vh ". Or if you want to make it half the height of the viewport, say " height: 50vh ".

How do I Auto adjust height in CSS?

If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly. If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow.


2 Answers

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.

like image 158
Prestaul Avatar answered Oct 08 '22 18:10

Prestaul


You can use jQuery to achieve this trick

var h = $(window).height();
$('#yourdiv').height(h);
like image 41
Trav McKinney Avatar answered Oct 08 '22 19:10

Trav McKinney