Is it possible to determine if the content has become larger than the viewport? I have a web page like so
=======================================
+--------------------------------+ ^
| header | |
| | |
+--------------------------------+ |
| | |
| | |
| | viewport
| main | |
| | |
| | |
+--------------------------------+ |
| footer | |
+--------------------------------+ V
=======================================
Under default circumstances, the footer is sticky to the bottom of the browser with the help of style position: fixed
. This is when main
has content that is short enough that the whole page fits in the viewport. The footer style is changed to position: relative
so the footer moves down with the text if the text in main
is too large to fit in the viewport. If the text in the body is short enough that it fits in the viewport, the footer should remain fixed
. The footer position should change to relative
only when the text is longer or when a smaller screen size is used, which is only when I want the footer to move down beyond the viewport.
How do I determine that the height of main is large enough that the footer should be pushed down?
=======================================
+--------------------------------+ ^
| header | |
| | |
+--------------------------------+ |
| | |
| | |
| | viewport
| main | |
| | |
| | |
| | |
| | |
| | V
=======================================
| |
| |
+--------------------------------+
| footer |
+--------------------------------+
Update: Actually, I don't just want the footer to stay at the bottom of the page. I want the footer to stay at the bottom of the page only if the total page height is shorter than the viewport. If the page content makes the page taller than the viewport, then, and only then, should the footer be pushed down with the content. I think Pete's comment below might help me solve this.
Update 2: Solved by using a bit of JavaScript. Sorry for a really trivial question, but asking it here almost unblocked the really easy solution that was escaping me. Thanks everyone.