Skip to content

Hybrid sticky/relative positioned footer #2390

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Hybrid sticky/relative positioned footer #2390

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
16183ca
Add hybrid mode between sticky and relative for footer into library a…
hannahiss Nov 27, 2023
041a950
Add hybrid mode between sticky and relative for footer into library a…
hannahiss Nov 27, 2023
8932351
Add hybrid mode between sticky and relative for footer into library a…
hannahiss Nov 27, 2023
3cf522a
.
hannahiss Nov 27, 2023
3c497de
.
hannahiss Nov 27, 2023
9786c3b
rollback commit error
hannahiss Nov 28, 2023
046aafa
rollback commit error
hannahiss Nov 28, 2023
5665179
Merge branch 'main' into main-his-hybrid-sticky-footer
louismaximepiton Jan 4, 2024
c9982f6
Merge branch 'main' into main-his-hybrid-sticky-footer
hannahiss Feb 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions scss/_footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
.footer {
position: sticky;
top: 100vh;

> * {
// scss-docs-start footer-part-css-vars
--#{$prefix}footer-gap: 0;
Expand Down
7 changes: 5 additions & 2 deletions scss/_reboot.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,8 @@
}
// scss-docs-end scroll-offset
// End mod

min-height: 100vh; // Boosted mod
}


Expand All @@ -63,10 +65,9 @@
// 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
@include font-size(var(--#{$prefix}body-font-size));
font-weight: var(--#{$prefix}body-font-weight);
line-height: var(--#{$prefix}body-line-height);
color: var(--#{$prefix}body-color);
Expand All @@ -75,10 +76,12 @@ body {
/* rtl:remove */
letter-spacing: $letter-spacing-base; // Boosted mod
background-color: var(--#{$prefix}body-bg); // 2
font-synthesis: none; // Boosted mod // 5
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
-webkit-font-smoothing: subpixel-antialiased; // Boosted mod
text-rendering: optimizespeed; // Boosted mod
@include font-size(var(--#{$prefix}body-font-size));
}
// scss-docs-end reboot-body-rules

Expand Down
5 changes: 0 additions & 5 deletions site/assets/scss/_boosted.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,6 @@
}
}

html,
body {
min-height: 100vh;
}

//
// Boosted logo
//
Expand Down
3 changes: 0 additions & 3 deletions site/assets/scss/_footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
2 changes: 2 additions & 0 deletions site/content/docs/5.3/components/footer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link
Member

@louismaximepiton louismaximepiton Nov 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Might not be true for some DOM reasons. But for simple syntax where <footer> is a direct child of <body> it seems to work pretty well. Any opinion on this @julien-deramond ?


{{< 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 >}}
Expand Down