diff --git a/scss/_footer.scss b/scss/_footer.scss index 236ee285d8..662d95a051 100644 --- a/scss/_footer.scss +++ b/scss/_footer.scss @@ -17,6 +17,8 @@ --#{$prefix}navbar-nav-line-height: #{$footer-line-height-sm}; --#{$prefix}navbar-nav-letter-spacing: #{$footer-letter-spacing}; + position: sticky; + top: 100vh; display: block; color: var(--#{$prefix}footer-color); box-shadow: none; diff --git a/scss/_reboot.scss b/scss/_reboot.scss index d0d1cba581..7290b71eb7 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -48,6 +48,8 @@ } // scss-docs-end scroll-offset // End mod + + min-height: 100vh; // Boosted mod } @@ -63,6 +65,7 @@ // scss-docs-start reboot-body-rules body { position: relative; // Boosted mod: required for back-to-top component + min-height: 100vh; // Boosted mod margin: 0; // 1 font-family: var(--#{$prefix}body-font-family); font-synthesis: none; // Boosted mod // 5 diff --git a/site/assets/scss/_boosted.scss b/site/assets/scss/_boosted.scss index a4798cf721..e35b932fcc 100644 --- a/site/assets/scss/_boosted.scss +++ b/site/assets/scss/_boosted.scss @@ -7,11 +7,6 @@ } } -html, -body { - min-height: 100vh; -} - // // Boosted logo // diff --git a/site/assets/scss/_footer.scss b/site/assets/scss/_footer.scss index 66613e17a9..c221a8b57e 100644 --- a/site/assets/scss/_footer.scss +++ b/site/assets/scss/_footer.scss @@ -3,8 +3,5 @@ // .bd-footer { - position: sticky; // Boosted mod - top: 100vh; // Boosted mod - // Boosted mod: no `a` selector since we use our Boosted footer component } diff --git a/site/content/docs/5.3/components/footer.md b/site/content/docs/5.3/components/footer.md index 256649f280..bac4526399 100644 --- a/site/content/docs/5.3/components/footer.md +++ b/site/content/docs/5.3/components/footer.md @@ -22,6 +22,8 @@ You can choose to display each part or not, except the last one which is mandato If these available parts don't meet your specific needs, feel free to develop your own custom part accordingly to the Orange Design System. +The footer is positioned at the bottom of the window when the page content is smaller than the window, and at the bottom of the page when it is bigger. + {{< callout warning >}} This footer component is based on the [navbar component]({{< docsref "/components/navbar" >}}). Don't forget to import the corresponding SCSS file if you're using [Lean Sass imports]({{< docsref "/customize/optimize#lean-sass-imports" >}}). {{< /callout >}}