CODEWITHSUNDEEP
css
Tarik
Tarik

Reputation: 1897

What is the logic behind { height: 100%; position: absolute; } getting browser height?

Okay, so there's three ways to get browser window height (NOT full web page height, that is the difference).

  1. Vertical height unit, explained wonderfully here.
  2. jQuery
  3. Using { height: 100%; position: absolute; } on an element. (jsfiddle)

I do not understand the logic behind #3 on my list.

height: 100% and absolute positioning. height: 100% fills up the parent. Positioning absolute also is relative to the parent, so shouldn't it take the full height of the page. How does the viewport come into play?

I know that fixed is relative to the viewport, but I thought that was the difference from absolute. The height: 100% div does have a parent, its the body, it should be relative to that.

Can someone please explain?

Upvotes: 3

Views: 92

Answers (1)

Rob
Rob

Reputation: 15158

An absolutely positioned element is placed in relation to the first parent that is also positioned. The body element has no positioning applied to it in your example. Therefore, the div has no reference since absolutely positioned elements are taken out of the normal flow.

If you assign positioning to the body, typically position:relative;, you will find what you are looking for.

W3C CSS2.1 explanation

Upvotes: 1

Related Questions