Skip to content

Instantly share code, notes, and snippets.

@huyinghuan

huyinghuan/flex-layout.html

Created October 26, 2017 16:04
Show Gist options
  • Save huyinghuan/b4e7ea3509ae19f3abbe293df90744ab to your computer and use it in GitHub Desktop.
Save huyinghuan/b4e7ea3509ae19f3abbe293df90744ab to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flex-layout.html
<html>
<head>
<style>
body{
height: 100%;
background-color: gray;
padding: 0px;
margin: 0px;
}
header{
height: 40px;
background-color: greenyellow;
}
footer{
height: 40px;
background-color: greenyellow;
}
#main{
flex: 1;
-webkit-flex:1;
-webkit-box-flex:1;
background-color: rgb(116, 152, 219);
overflow: hidden;
display:flex;
flex-direction:row;
}
#container{
height: 100%;
display:flex;
flex-direction:column;
}
p{
height: 250px;
}
#left-nav{
width: 200px;
height: 100%;
background-color: rebeccapurple;
}
#route-index{
flex: 1;
-webkit-flex:1;
-webkit-box-flex:1;
background-color: rgb(226, 34, 194);
height: 100%;
display:flex;
flex-direction:column;
}
#input{
height: 50px;
background-color: rgb(201, 175, 30);
}
#table{
flex: 1;
-webkit-flex:1;
-webkit-box-flex:1;
background-color: rgb(25, 212, 56);
}
</style>
</head>
<body>
<div id="container">
<header></header>
<div id="main">
<div id="left-nav"></div>
<div id="route-index">
<div id="input"></div>
<div id="table">
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p><p>1</p><p>1</p>
</div>
</div>
</div>
<footer></footer>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment