0

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.

punkish
  • 9,855
  • 20
  • 61
  • 86
  • 2
    could you not measure then height of the container and then compare it with the height of the window? but if you are just after a sticky footer that gets pushed down with extra content, you can just use css - https://stackoverflow.com/questions/23651942/css-single-column-layout-centered-fixed-width-100-height-w-header-and-footer/23657083#23657083 – Pete Dec 04 '18 at 14:59
  • hmmm… theoretically yes. So, *after* I add content to `main`, then I calculate whether the sum of the heights of header, main and footer are more than the viewport, and it they are, then I change the style of the footer from fixed to relative. I am wondering if there is something more elegant before I embark on that. Thanks for the suggestion – punkish Dec 04 '18 at 15:01
  • see edited comment - you don't need js for this or google sticky footer – Pete Dec 04 '18 at 15:03

0 Answers0