perf(layout): optimize the main block height calculation (#1249)

If the post content height is smaller than the panel, there will be a large blank space between the bottom of the post and "Further Reading" section.
cotes2020 · Sep 18, 2023 · 73e171b · 73e171b
1 parent 726085c
commit 73e171b
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -27,10 +27,10 @@
     {% include sidebar.html lang=lang %}
 
     <div id="main-wrapper" class="d-flex justify-content-center">
-      <div class="container px-xxl-5">
+      <div class="container d-flex flex-column px-xxl-5">
         {% include topbar.html lang=lang %}
 
-        <div class="row">
+        <div class="row flex-grow-1">
           <main
             aria-label="Main Content"
             class="col-12 col-lg-11 col-xl-9 px-md-4{% unless has_tail %} pb-5{% endunless %}"

diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
@@ -372,7 +372,6 @@ i {
 
 main {
   line-height: 1.75;
-  min-height: calc(100vh - $topbar-height - $footer-height);
 
   h1 {
     margin-top: 2rem;
@@ -1127,6 +1126,10 @@ search {
   position: relative;
 
   @include pl-pr(0);
+
+  > .container {
+    min-height: 100vh;
+  }
 }
 
 #topbar-wrapper.row,
@@ -1280,10 +1283,6 @@ search {
     }
   }
 
-  main {
-    min-height: calc(100vh - $topbar-height - $footer-height-large);
-  }
-
   footer {
     @include slide;