Skip to content

Instantly share code, notes, and snippets.

@ttchengcheng

ttchengcheng/multi-panel.html

Last active September 5, 2018 15:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ttchengcheng/d0d7dd0253daef968f5b59288a5c764d to your computer and use it in GitHub Desktop.
Save ttchengcheng/d0d7dd0253daef968f5b59288a5c764d to your computer and use it in GitHub Desktop.
Download ZIP
multi-panel layout with flex
Raw
multi-panel.html
<html>
<head>
<style>
html,
body {
/* set height of html and body both to 100% to fill the page */
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
.bg {
background-color: cadetblue;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
.header {
background-color: darkgoldenrod;
flex-basis: 28px;
flex-grow: 0;
flex-shrink: 0;
}
.footer {
background-color: darkgoldenrod;
flex-basis: 36px;
flex-grow: 0;
flex-shrink: 0;
}
/* flex-basis should be set to a value like 0px for the growing/shrinking part */
/* , or the layout may be calcuated unproperly */
.content {
flex-basis: 0px;
flex-grow: 1;
flex-shrink: 1;
display: flex;
flex-direction: row;
}
.left-panel {
background-color: #aef0ff;
flex-basis: 200px;
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: column;
overflow-y: scroll;
}
.left-upper-panel {
background-color: red;
/* flex-basis should be set to a value like 0px for the growing/shrinking part */
/* , or the layout may be calcuated unproperly */
flex-basis: 0px;
flex-grow: 6;
flex-shrink: 6;
overflow-y: scroll;
}
.left-lower-panel {
background-color: purple;
/* flex-basis should be set to a value like 0px for the growing/shrinking part */
/* , or the layout may be calcuated unproperly */
flex-basis: 0px;
flex-grow: 4;
flex-shrink: 4;
/* enable scrollbar */
overflow-y: scroll;
}
.right-panel {
background-color: #aef0ff;
flex-basis: 200px;
flex-grow: 0;
flex-shrink: 0;
/* enable scrollbar */
overflow-y: scroll;
}
.mid {
background-color: #fffaaa;
flex-basis: 0px;
flex-grow: 1;
flex-shrink: 1;
}
</style>
</head>
<body>
<div class="bg">
<div class="header">header</div>
<div class="content">
<div class="left-panel">
<div class="left-upper-panel">
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
<br/> left-upper
</div>
<div class="left-lower-panel">
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
<br/> left-lower
</div>
</div>
<div class="mid">mid</div>
<div class="right-panel">right</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment