What is the logic of growth {height: 100%; position: absolute; } getting browser height?
Ok, so there are three ways to get the height of the browser window (NOT the full height of the webpage, that's the difference).
- The vertical unit of height explained here is wonderful.
- JQuery
- Using {height: 100%; position: absolute; } on the element. (Jsfiddle)
I don't understand logic # 3 on my list.
height: 100%
and absolute
. height: 100%
fills the parent element. Positioning absolute
also refers to the parent, so it shouldn't take up the entire height of the page. How does the viewport come into play?
I know which fixed
refers to the viewport, but I thought it was different from absolute
. The div height: 100%
has a parent, its body
, it should refer to that.
Can someone please explain?
source to share
An absolutely positioned element is positioned relative to its first parent, which is also positioned. The body element has no positioning applied to it in your example. Therefore the div has no link since perfectly normal elements are taken out of the normal flow.
If you've assigned positioning to the body, position:relative;
you'll usually find what you're looking for.
source to share