feat(v2): add sticky footer (#1855)

* feat(v2): add sticky footer * Update CHANGELOG-2.x.md * Update CHANGELOG-2.x.md
facebook · Oct 23, 2019 · 68d5adf · 68d5adf
1 parent b65c1b2
commit 68d5adf
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 1 deletion.
diff --git a/CHANGELOG-2.x.md b/CHANGELOG-2.x.md
@@ -1,6 +1,11 @@
 # Docusaurus 2 Changelog
 
+## Unreleased
+
+- Add sticky footer.
+
 ## 2.0.0-alpha.30
+
 - Fix babel transpilation include/exclude logic to be more efficient. This also fix a very weird bug `TypeError: Cannot assign to read only property 'exports' of object '#<Object>'` if your website path contains `docusaurus` word in it.
 
 ## 2.0.0-alpha.29
@@ -11,6 +16,7 @@
 - New UI for webpack compilation progress bar.
 
 ## 2.0.0-alpha.28
+
 - Further reduce memory usage to avoid heap memory allocation failure.
 - Fix `keywords` frontmatter for SEO not working properly.
 - Fix `swizzle` command not passing context properly to theme packages.

diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/index.js b/packages/docusaurus-theme-classic/src/theme/Layout/index.js
@@ -61,7 +61,7 @@ function Layout(props) {
         <meta name="twitter:card" content="summary" />
       </Head>
       <Navbar />
-      {children}
+      <main className="main">{children}</main>
       {!noFooter && <Footer />}
     </React.Fragment>
   );

diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/styles.css b/packages/docusaurus-theme-classic/src/theme/Layout/styles.css
@@ -5,8 +5,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+html,
+body {
+  height: 100%;
+}
+
 body {
   margin: 0;
   padding-top: var(--ifm-navbar-height);
   transition: var(--ifm-transition-fast) ease color;
 }
+
+body > div {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.main {
+  flex: 1 0 auto;
+}