Skip to content

Instantly share code, notes, and snippets.

@ThomasKientz

ThomasKientz/flex-stacked-layout.html

Last active October 1, 2020 12:22
Show Gist options
  • Save ThomasKientz/3daf0807cb20e0809959bee8075e7fea to your computer and use it in GitHub Desktop.
Save ThomasKientz/3daf0807cb20e0809959bee8075e7fea to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ThomasKientz revised this gist Oct 1, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion flex-stacked-layout.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    <body style="margin: 0">
    <div style="min-height: 100vh; display: flex; flex-direction: column">
    <div style="background-color: darkcyan">Header</div>
    <div style="flex: 1 1 0px; overflow: scroll">
    <div style="flex: 1 1 0px; overflow: auto">
    <div style="height: 20000px">Scrollable content</div>
    </div>
    <div style="background-color: red">Footer</div>
  2. ThomasKientz renamed this gist Oct 1, 2020. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html → flex-stacked-layout.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,9 +2,9 @@
    <html lang="en">
    <body style="margin: 0">
    <div style="min-height: 100vh; display: flex; flex-direction: column">
    <div style="background-color: darkcyan">Toolbar</div>
    <div style="background-color: darkcyan">Header</div>
    <div style="flex: 1 1 0px; overflow: scroll">
    <div style="height: 20000px">I am scrollable</div>
    <div style="height: 20000px">Scrollable content</div>
    </div>
    <div style="background-color: red">Footer</div>
    </div>
  3. ThomasKientz created this gist Oct 1, 2020.
    12 changes: 12 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,12 @@
    <!DOCTYPE html>
    <html lang="en">
    <body style="margin: 0">
    <div style="min-height: 100vh; display: flex; flex-direction: column">
    <div style="background-color: darkcyan">Toolbar</div>
    <div style="flex: 1 1 0px; overflow: scroll">
    <div style="height: 20000px">I am scrollable</div>
    </div>
    <div style="background-color: red">Footer</div>
    </div>
    </body>
    </html>