#6372: Fix footer placement

netbox/project-static/netbox.scss

@@ -252,13 +252,15 @@ h6.accordion-item-title {
   width: 100%;
   max-width: 330px;
   padding: 15px;
-  // margin: auto;
+  & input:focus {
+    z-index: 1;
+  }
 }
 
 .form-login input[type='text'] {
   margin-bottom: -1px;
-  border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
 .form-login input[type='password'] {
@@ -299,18 +301,26 @@ li.dropdown-item.dropdown-item-btns {
 nav.nav.nav-pills {
   .nav-item.nav-link {
     padding: 0.25rem 0.5rem;
-    // font-size: $font-size-base;
     font-size: $font-size-sm;
     border-radius: $border-radius;
     &:hover {
-      // color: $body-color;
-      // background-color: var(--nbx-sidebar-link-hover-bg);
       background-color: $accordion-button-active-bg;
       color: $accordion-button-active-color;
     }
   }
 }
 
+// Ensure the content container is full-height, and that the content block is also full height so
+// that the footer is always at the bottom.
+div.content-container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  div.content {
+    flex: 1;
+  }
+}
+
 // Prevent scrolling of body content when nav menu is open on mobile.
 .sidebar.collapse.show ~ .content-container {
   @media (max-width: map.get($grid-breakpoints, 'md')) {

netbox/templates/base/layout.html

@@ -61,33 +61,33 @@
 
         </nav>
 
-        {# Top bar #}
-        <nav class="navbar navbar-light sticky-top flex-md-nowrap p-3 search container-fluid">
-          <div class="d-md-none w-100 d-flex justify-content-between align-items-center my-3">
-              <a class="px-2 sidebar-logo d-block d-md-none" href="{% url 'home' %}">
-                <img src="{% static 'netbox_logo.svg' %}" alt="NetBox logo" />
-              </a>
-              <button
-                type="button"
-                aria-expanded="false"
-                data-bs-toggle="collapse"
-                aria-controls="sidebar-menu"
-                data-bs-target="#sidebar-menu"
-                aria-label="Toggle Navigation"
-                class="navbar-toggler position-relative collapsed"
-              >
-                <span class="navbar-toggler-icon"></span>
-              </button>
-            </div>
-            <div class="d-none d-md-flex w-100 search-container">
-              {% search_options %}
-              {% include 'inc/profile_button.html' %}
-            </div>
-        </nav>
-
         {# Body #}
         <div class="content-container">
 
+          {# Top bar #}
+          <nav class="navbar navbar-light sticky-top flex-md-nowrap p-3 search container-fluid">
+            <div class="d-md-none w-100 d-flex justify-content-between align-items-center my-3">
+                <a class="px-2 sidebar-logo d-block d-md-none" href="{% url 'home' %}">
+                  <img src="{% static 'netbox_logo.svg' %}" alt="NetBox logo" />
+                </a>
+                <button
+                  type="button"
+                  aria-expanded="false"
+                  data-bs-toggle="collapse"
+                  aria-controls="sidebar-menu"
+                  data-bs-target="#sidebar-menu"
+                  aria-label="Toggle Navigation"
+                  class="navbar-toggler position-relative collapsed"
+                >
+                  <span class="navbar-toggler-icon"></span>
+                </button>
+              </div>
+              <div class="d-none d-md-flex w-100 search-container">
+                {% search_options %}
+                {% include 'inc/profile_button.html' %}
+              </div>
+          </nav>
+
           {# Page header #}
           {% block header %}
             <div class="title-container px-3 py-3">
@@ -104,7 +104,7 @@
           {% endblock header %}
 
           {# Page content #}
-          <div id="content" class="container-fluid px-0 m-0">
+          <div id="content" class="container-fluid content px-0 m-0">
             {% block tabs %}{% endblock %}
             <div class="px-3">
               {% block content %}{% endblock %}
@@ -113,7 +113,7 @@
 
           {# Page footer #}
           <footer class="footer container-fluid pb-3 pt-4 px-0">
-            <div class="row align-items-center justify-content-end">
+            <div class="row align-items-center justify-content-end mx-0">
             <div class="col-auto d-none d-md-block"></div>
               <div class="col text-center text-md-end small text-muted">
                 <span class="fw-light d-block d-md-inline">{% now 'Y-m-d H:i:s T' %}</span>