Skip to content

Instantly share code, notes, and snippets.

@dam1r89
Created March 14, 2017 13:19
Show Gist options
  • Save dam1r89/738b696936e912eed31ac22c33320118 to your computer and use it in GitHub Desktop.
Save dam1r89/738b696936e912eed31ac22c33320118 to your computer and use it in GitHub Desktop.
Flexbox boilerplate layout with fixed left sidebar for web application
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body, html{
padding: 0;
margin: 0;
height: 100%;
}
.app {
height: 100%;
display: flex;
flex-direction: row;
}
.nav {
background: #eee;
flex: 0 1 380px;
}
.content {
background: aliceblue;
flex: 1;
overflow: auto;
}
</style>
</head>
<body>
<div class="app">
<div class="nav">
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
</ul>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere molestias aliquid neque distinctio soluta placeat temporibus blanditiis cum officiis quas culpa veniam, ea quod inventore voluptate odit similique ullam eius.
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment