Skip to content

Instantly share code, notes, and snippets.

@kwhinnery

kwhinnery/full-page-css3.html

Created June 10, 2010 17:08
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save kwhinnery/433307 to your computer and use it in GitHub Desktop.
Save kwhinnery/433307 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
full-page-css3.html
<html>
<head>
<style>
html,body {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>
@bgrins
Copy link

bgrins commented Aug 29, 2011

Nice, I had to add height:100%; onto your html, body { margin: 0; padding: 0; } to get this to work

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment