Sticky footer with fixed header and fixed sidebar - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Footer stick to bottom

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Footer stick to bottom

Description

Sticky footer with fixed header and fixed sidebar

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
body {<!--from w  ww . ja v a 2s  .co m-->
   margin:0 !important;
   width:100vw;
   height:100vh;
}

nav {
   height:63px;
   width:100%;
   z-index:1000;
   position:fixed;
   background:Chartreuse;
   box-shadow:0 2px 6px yellow;
   -webkit-box-shadow:0 2px 6px blue;
}

section {
   height:301vh;
}

aside {
   left:0;
   top:21%;
   height:401px;
   width:201px;
   background:pink;
   -webkit-box-shadow:0px 3px 8px OrangeRed;
   box-shadow:0px 3px 8px grey;
   position:fixed;
}

footer {
   bottom:0;
   z-index:1000;
   position:fixed;
   height:65px;
   width:100%;
   background:BlueViolet;
   box-shadow:0 -2px 6px Chartreuse;
   -webkit-box-shadow:0 -2px 6px yellow;
}
</style> 
 </head> 
 <body> 
  <nav></nav> 
  <aside></aside> 
  <section></section> 
  <footer></footer>  
 </body>
</html>

Related Tutorials