Skip to content

Instantly share code, notes, and snippets.

@andreibsk

andreibsk/layout.html

Last active September 15, 2020 15:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save andreibsk/74981f20e0c8aff1d836b0aff50a6962 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save andreibsk/74981f20e0c8aff1d836b0aff50a6962 to your computer and use it in GitHub Desktop.
Download ZIP
Example page layout with two independently scrollable lists using flex. Preview: https://gistpreview.github.io/?74981f20e0c8aff1d836b0aff50a6962
Raw
layout.html
<html>
<head>
<link rel="stylesheet" href="site.css" type="text/css">
<style>
body {
margin: 0;
height: 100%;
}
.vsplit {
display: flex;
flex-direction: row;
overflow-y: auto;
}
.hsplit {
display: flex;
flex-direction: column;
overflow-y: auto;
}
.fgrow {
flex: 1;
}
.vscroll {
overflow-y: auto;
}
</style>
</head>
<body class="h-100 vsplit">
<div style="background-color: lightcyan; min-width: 100px;">
SIDEBAR
</div>
<div class="fgrow hsplit">
<div style="background-color: plum;">
HEADER
</div>
<div style="background-color:yellowgreen;">
DETAILS SECTION<p>x</p>
<p>x</p>
<p>x</p>
</div>
<div class="fgrow vsplit" style="background-color: beige;">
<div class="vscroll" style="min-width: 150px;">
SIDE LIST:
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
</div>
<div class="hsplit">
<div class="fgrow vscroll">
CONTENT:
<p>Sriracha small batch tousled Tumblr banh mi sartorial. Cosby sweater XOXO direct trade Austin
meggings banjo. Wayfarers deep v tousled Schlitz shabby chic, Portland Truffaut Marfa aesthetic
keffiyeh. Salvia retro tattooed sartorial polaroid. Selvage hella 3 wolf moon PBR pug, ugh
Schlitz freegan keffiyeh raw denim jean shorts wayfarers roof party. Neutra Shoreditch iPhone,
+1 brunch Echo Park XOXO slow-carb street art Vice Williamsburg tattooed forage. Butcher Godard
ethical try-hard.</p>
<p>Vegan blog Truffaut irony deep v Etsy. You probably haven't heard of them Schlitz chambray art
party craft beer Echo Park mixtape, deep v fashion axe Wes Anderson twee McSweeney's DIY. Retro
twee polaroid 3 wolf moon, Bushwick locavore organic skateboard keffiyeh Kickstarter
Williamsburg sustainable Godard sartorial trust fund. Stumptown paleo put a bird on it VHS
hella. Put a bird on it mixtape Godard, vegan farm-to-table letterpress chia hella. Meggings DIY
freegan normcore gastropub blog. Dreamcatcher wolf kitsch biodiesel lomo jean shorts, pug fap
Odd Future craft beer stumptown locavore cornhole put a bird on it salvia.</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>Hoodie Truffaut chillwave PBR art party. Slow-carb literally readymade, tousled stumptown ennui
trust fund seitan paleo blog typewriter vegan. 90's mixtape American Apparel, kale chips art
party iPhone Etsy Neutra organic kogi direct trade typewriter. Aesthetic occupy Portland artisan
craft beer fixie, Pinterest irony normcore letterpress. 8-bit craft beer seitan flexitarian,
synth banh mi cardigan ethical High Life. Fixie whatever literally semiotics Helvetica 8-bit.
Gluten-free tattooed Odd Future umami blog master cleanse, asymmetrical 8-bit yr.</p>
<p>Tattooed gentrify asymmetrical twee, fashion axe normcore banh mi Etsy. Irony post-ironic kale
chips readymade selfies art party, Marfa narwhal occupy before they sold out Thundercats. Banjo
locavore 3 wolf moon artisan Marfa. XOXO church-key hella bitters, pour-over Blue Bottle wolf
typewriter Carles. American Apparel umami twee locavore, blog hella artisan. Mixtape Shoreditch
sriracha, organic before they sold out asymmetrical fashion axe ugh. Kale chips yr Pitchfork
jean shorts Vice gentrify.</p>
</div>
<div style="background-color:lightskyblue;">
TOTAL: asdfasdf
</div>
</div>
</div>
<div style="background-color: plum;">
FOOTER
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment