Use the full screen height for the main content to stabilize the nav (#…

…9153)

On large screens, we require scrolling below the fold for the next page
/ prev page navigation footer. This dramatically improves visibility of
the left nav when looking at small pages like section overviews.
Critically, this stops the height of the navigation from jumping around
depending on the page you're on. On small screens, the positioning is
unchanged since the nav is in a hamburger menu and it'd be annoying to
scroll.

Eventually, we could move the next / prev nav out of the footer and into
the content, e.g., as in
#9121 (comment).

These images don't quite do the change in experience justice. It's the
consistency when changing pages that feels the most different.

Before

<img width="1484" alt="Screenshot 2024-11-15 at 10 16 30 AM"
src="https://github.com/user-attachments/assets/e0729691-31ea-46cc-9679-636fb144eab7">

After

<img width="1474" alt="Screenshot 2024-11-15 at 10 15 26 AM"
src="https://github.com/user-attachments/assets/d01ae5cd-1347-45de-a294-fbd56b2d6fb5">

docs/stylesheets/extra.css

@@ -123,6 +123,18 @@ See https://github.com/astral-sh/uv/issues/5130 */
   }
 }
 
+
+/* Always take the full screen for content, require scrolling to see the footer
+This stops the size of the nav from jumping around when you visit a page without
+a lot of content (i.e., an overview page). We don't apply this to sma screens
+because the nav is in a hamburger menu anyway
+*/
+@media screen and (min-width: 76.25em) {
+  .md-main {
+    min-height: 100vh;
+  }
+}
+
 /* Tweak the formatting of the primary nav on a large screen */
 @media screen and (min-width: 76.25em) {
   .md-nav--primary .md-nav {