Skip to content

Instantly share code, notes, and snippets.

@bgrins
Forked from kwhinnery/full-page-css3.html
Created August 29, 2011 20:31
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 bgrins/1179327 to your computer and use it in GitHub Desktop.
Save bgrins/1179327 to your computer and use it in GitHub Desktop.
<html>
<head>
<style>
html,body {height:100%;margin:0;padding:0;}
#app {
height:100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align:stretch;
}
#header {
height:50px;
background-color:#cdcdcd;
}
#footer {
height:30px;
background-color:#cdcdcd;
}
#content {
-webkit-box-flex:1;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-align:stretch;
}
#sidebar { width:120px; background-color:#676767;}
#main {
-webkit-box-flex:1;
background-color:green;
}
</style>
</head>
<body>
<div id="app">
<div id="header">This is the header</div>
<div id="content">
<div id="sidebar">Sidebar</div>
<div id="main">Main Content</div>
</div>
<div id="footer">
&copy; 2010 Awesome Productions Ltd.
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment