Skip to content

Instantly share code, notes, and snippets.

@abdulbasit-dev

abdulbasit-dev/index.html

Created March 15, 2022 08:50
Show Gist options
  • Save abdulbasit-dev/ff52d795542b74fb35a116b1cd2172fd to your computer and use it in GitHub Desktop.
Save abdulbasit-dev/ff52d795542b74fb35a116b1cd2172fd to your computer and use it in GitHub Desktop.
Download ZIP
CSS to make footer stay at bottom of the page
Raw
index.html
<body>
<header contentEditable>Header</header>
<article contentEditable>Content</article>
<footer contentEditable>Footer</footer>
</body>
Raw
style.css
/* 1 flex-box */
body {
height: 100vh !important;
margin: 0 !important;
}
/* Trick */
body {
display: flex !important;
flex-direction: column !important;
}
footer {
margin-top: auto !important;
}
/* Grid */
body{
min-height: 100vh;
margin: 0;
display: grid;
grid-template-rows: auto 1fr auto;
}
header{
min-height:50px;
background:lightcyan;
}
footer{
min-height:50px;
background:PapayaWhip;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment