Skip to content

Instantly share code, notes, and snippets.

@pumano

pumano/index.html

Created August 24, 2017 15:57
Show Gist options
  • Save pumano/4b8e8f2b5637bfcc346acca4193814b6 to your computer and use it in GitHub Desktop.
Save pumano/4b8e8f2b5637bfcc346acca4193814b6 to your computer and use it in GitHub Desktop.
Download ZIP
HTML and CSS for sticky dashboard layout
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<aside>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</aside>
<section>
<header>My Header</header>
<div class="content-wrapper">
<main>
Content here
</main>
</div>
</section>
</div>
</body>
</html>
Raw
styles.css
body {
margin: 0;
}
.wrapper {
display: flex;
overflow: hidden;
}
aside {
width: 170px;
height: 100vh;
background-color: #333;
color: #fff;
}
section {
width: 100%;
height: 100vh;
}
header {
height: 50px;
background-color: #CCC;
}
.content-wrapper {
min-height: 700px;
height: 100%;
overflow: scroll;
}
main {
height: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment