Add option to stretch the body to the full height

Kevinjil · Kevinjil · commit fa1b8d7a3dd7 · 2025-11-28T13:47:56.000+01:00
Using CSS flexboxes, we can stretch the document body to the full
height. For doing so, we will need to use a flexbox layout from some
element of which we know the desired minimal height up to the element in
the DOM tree which should stretch.

We achieve the stretching by defining the minimum height of the body to
be 100 viewport height units and adding the `flex-pass` class to all
elements in between. The `flex-pass` class sets the display method of
the element to be a flexbox to allow stretching of the children, and
sets its own grow and shrink to 1.

To counter some rounding error encountered in Gecko and derived
(firefox) browsers, we subtract 1 pixel from the full viewport height to
prevent a minimal 1 pixel scrollbar.
diff --git a/webapp/public/style_domjudge.css b/webapp/public/style_domjudge.css
@@ -29,6 +29,24 @@ body.static {
     padding-top: 1rem;
 }
 
+/* Some browsers have a rounding error in flex, so waste 1px to prevent scrollbars. */
+.fill-height {
+    box-sizing: border-box;
+    display: flex;
+    min-height: calc(100vh - 1px);
+}
+
+.flex-pass {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+/* Override the bootstrap active tab to be flex instead of block by a more specific selector. */
+.fill-height .flex-pass.tab-pane.active {
+  display: flex;
+}
+
 /* menu */
 #menuDefault ul li.nav-item {
     white-space: nowrap;
diff --git a/webapp/templates/base.html.twig b/webapp/templates/base.html.twig
@@ -27,12 +27,12 @@
         <link rel="stylesheet" href="{{ asset('css/custom/' ~ file) }}">
     {% endfor %}
 </head>
-<body{% if static is defined and static %} class="static"{% endif %}>
+<body class="{% if fill_height is defined and fill_height %} fill-height{% endif %}{% if static is defined and static %} static{% endif %}">
 {% block menu %}{% endblock %}
 {% block body %}
-    <div class="container-fluid">
-        <div class="row">
-            <div class="col-12">
+    <div class="container-fluid{% if fill_height is defined and fill_height %} flex-pass{% endif %}">
+        <div class="row{% if fill_height is defined and fill_height %} flex-pass{% endif %}">
+            <div class="col-12{% if fill_height is defined and fill_height %} flex-pass{% endif %}">
                 {% block messages %}
                     {% include 'partials/messages.html.twig' %}
                 {% endblock %}
