Skip to content

fix: ensure footer is pushed to the bottom on large screens #2075

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 1 commit into
base: gh-pages
Choose a base branch
from
Open

fix: ensure footer is pushed to the bottom on large screens #2075

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
14 changes: 14 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,20 @@ h1, h2, h3, h4, h5, h6,
}
}

html {
/*
html & body need to take the whole
visible area in order for the footer
to be pushed all the way down or else
on really big screens or when the user
is zoomed out, the footer is not all
the way at the bottom of the screen
*/
height: 100%;
}

body {
height: 100%;
font: 400 14px/1.6 "Open Sans", sans-serif;
background: var(--bg);
margin: 0;
Expand All @@ -40,6 +53,7 @@ header {
}

footer {
margin-top: auto;
grid-area: footer;
}

Expand Down