Skip to content

Instantly share code, notes, and snippets.

@midzer
Created May 24, 2021 19:32
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save midzer/3893ce8c0bec6f805ec1a7bb3269775d to your computer and use it in GitHub Desktop.
Save midzer/3893ce8c0bec6f805ec1a7bb3269775d to your computer and use it in GitHub Desktop.
Fixed header and footer with scrollable content using flexbox
[Demo](https://fixed-header-footer.netlify.app/)
```html
<!DOCTYPE html>
<html lang="de-BY">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fixed header and footer with scrollable content using flexbox</title>
<style>
body {
margin: 0;
margin-left: auto;
margin-right: auto;
max-width: 15rem;
height: 100vh;
display: flex;
flex-direction: column;
}
header,
footer {
font-weight: bold;
background-color: beige;
}
.page {
min-height: 0;
display: flex;
flex-direction: column;
}
.content {
background-color: burlywood;
overflow-y: auto;
}
</style>
</head>
<body>
<header>Header 1</header>
<div class='page'>
<header>Header 2</header>
<div class="content">
Bavaria ipsum dolor sit amet luja Mongdratzal, Schbozal. Kumm geh Brotzeit ozapfa g’hupft wia gsprunga, Reiwadatschi Schorsch Trachtnhuat zünftig gscheckate: A Prosit der Gmiadlichkeit Ohrwaschl Meidromml wia, i glacht. Gar nia need Charivari a Prosit der Gmiadlichkeit wos Broadwurschtbudn. Ma Schuabladdla bittschön Meidromml Schbozal. Es om auf’n Gipfe nois Hetschapfah singan Servas i mechad dee Schwoanshaxn! So Biazelt Bradwurschtsemmal Ledahosn, Edlweiss wos. Trihöleridi dijidiholleri da, hog di hi da, i moan oiwei. G’hupft wia gsprunga middn Leonhardifahrt Schmankal, hod wui wia Watschnpladdla. Sauakraud nois wos a geh muass sauba is ma Wuascht des is schee sei wea nia ausgähd, kummt nia hoam Schneid. Wurschtsolod sog i sammawiedaguad Schmankal di oa Landla Biakriagal Maibam großherzig! Bradwurschtsemmal a fescha Bua jo mei, schnacksln scheans?
Weibaleid a bissal wos gehd ollaweil Ewig und drei Dog ma luja nix Gwiass woass ma ned Sepp Brotzeit Kirwa, singd Spezi. Hob hawadere midananda a, zwoa. Hawadere midananda vui Ohrwaschl a Maß und no a Maß. Breihaus Vergeltsgott Wiesn wia da Buachbinda Wanninger, damischa Griasnoggalsubbm. Foidweg hoam Gidarn auffi Radler, sog i mi da! Allerweil ozapfa jo mei trihöleridi dijidiholleri schnacksln Namidog naa a bissal am acht’n Tag schuf Gott des Bia nackata. Griasd eich midnand vasteh aba ned om auf’n Gipfe griasd eich midnand jo mei is des schee: Radler a ganze Sepp wia unbandig jo leck mi heid glacht. Wo hi Hendl Stubn helfgod Breihaus a bravs i hab an Spotzerl. Biaschlegl in da ozapfa hod, barfuaßat Servas a geh! Biawambn i hob di liab Biazelt heid gfoids ma sagrisch guad sowos Charivari sauba.
A bissal wos gehd ollaweil boarischer mehra Maibam, Jodler sog i. Hogg di hera Ledahosn des muas ma hoid kenna Wurscht sog i Weibaleid Hendl an Mongdratzal. Barfuaßat back mas Schorsch i hob di liab Schuabladdla ned. I hob di narrisch gean Stubn vo de mim Radl foahn Gidarn, g’hupft wia gsprunga! Oa Charivari heid gfoids ma sagrisch guad, gwiss: Schorsch a fescha Bua a so a Schmarn gscheid vui des boarischer Gstanzl: Wurschtsolod Ewig und drei Dog kummd, gscheit Haferl sei iabaroi geh auf der Oim, da gibt’s koa Sünd. Do legst di nieda a geh Greichats hi. Trachtnhuat schoo Marterl samma Edlweiss Maderln Edlweiss! Ghupft wia gsprunga Schorsch i is des liab Foidweg Weiznglasl Namidog. Kloan wia und, damischa Maßkruag Wurscht: Sauwedda Biaschlegl is di obandeln Brodzeid und glei wirds no fui lustiga, Gaudi!
</div>
<footer>Footer</footer>
</div>
</body>
</html>
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment