Skip to content

Instantly share code, notes, and snippets.

@lvivski

lvivski/index.html

Created January 21, 2012 19:43
Show Gist options
  • Save lvivski/1653711 to your computer and use it in GitHub Desktop.
Save lvivski/1653711 to your computer and use it in GitHub Desktop.
Download ZIP
Fixed To Browser Viewport
Raw
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Fixed To Browser Viewport ~ One Sidebar</title>
<style type="text/css">
* {margin:0; padding:0;}
body {
background:#CCF;
font:100% arial,"trebuchet ms",tahoma;
height: 100%;
}
html {
height: 100%;
overflow-y:scroll; /*keep scrollbar position present if FF at all times*/
}
#wrapper {
min-height:100%;
background:#E8E8F4;
}
#header {
position:fixed;
left:0; top:0;
z-index:2;
width:100%;
height:100px;
border-bottom: 1px solid #000;
background:#8293C3;
text-align:center;
}
#content {
padding:105px 210px 65px 0;/*padding to protect content from sliding under fixed elements.*/
min-height:0;/*IE7 haslayout if needed*/
}
#fixed {
position:fixed;
width:200px;
right:0;
top:101px;/*header height*/
bottom:61px; /*footer height*/
border-left: 1px solid #000;
background:#BCC5E1;
overflow:auto; /*give insurance for text acessability at smaller viewport heights*/
}
#footer {
position:fixed;
left:0; bottom:0;
z-index:2;
width:100%;
height:60px;
border-top: 1px solid #000;
background:#8293C3;
text-align:center;
}
/*=== Demo Typography ===*/
h2 {margin:0 .5em 0; padding-top:.2em;}
h3 {margin:0 .5em .5em; padding-top:.5em;}
p {margin:0 .7em .7em}
.scroll{margin-bottom:2em;}
.last{padding-bottom:.7em;}
</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) { //reloads the window if opera resized
if (init==true) {if (window.opera) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
</script>
</head>
<body>
<div id="header"><!--sits outside of wrapper div-->
<h2>Min-Height 100% with Fixed Header, Sidebar &amp; Footer</h2>
<h3>Fixed In Relation To The Browser Viewport</h3>
</div>
<div id="wrapper">
<div id="content">
<h3 class="scroll">Main Scrolling Content</h3>
<p class="scroll">Scrolling test text</p>
<p class="scroll">Scrolling test text</p>
<p class="scroll">Scrolling test text</p>
<p class="scroll">Scrolling test text</p>
<p class="scroll">Scrolling test text</p>
<p class="scroll">Scrolling test text</p>
<p class="scroll">Scrolling test text</p>
<p class="scroll">Scrolling test text</p>
<p class="scroll">Scrolling test text</p>
<p class="scroll">Scrolling test text</p>
<p class="scroll">Scrolling test text</p>
<p class="scroll">Scrolling test text</p>
<p class="scroll">Scrolling test text</p>
<p>Last scrolling content with 65px padding below</p>
</div>
</div><!-- end wrapper -->
<div id="fixed"><!--sits outside of wrapper div-->
<h3>Fixed Sidebar</h3>
<p>fixed content</p>
<p>fixed content</p>
<p>fixed content</p>
<p>fixed content</p>
<p>fixed content</p>
<p>fixed content</p>
<p>fixed content</p>
<p class="last">last fixed content</p>
</div>
<div id="footer"><!--sits outside of wrapper div-->
<h3>Fixed Footer</h3>
</div>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment