Sticky footer navbar and centred login panel - 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 navbar and centred login panel

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style>
html, body {
   height:100%;
}

body {<!-- ww  w . j  a  v  a2  s  . c o  m-->
   margin:0;
}

nav {
   background-color:Chartreuse;
   height:21px;
}

main {
   background-color:yellow;
   height:100px;
   margin:calc(51vh - 51px - 21px) calc(51vw - 151px);
   text-align:center;
   width:301px;
}

footer {
   background-color:blue;
   bottom:0;
   height:21px;
   position:absolute;
   width:100%;
}

@media all and (max-width: 300px) {
   body {
      background-color:pink;
   }

}

@media all and (max-height: 140px) {
   body {
      background-color:OrangeRed;
   }

}
</style> 
 </head> 
 <body translate="no"> 
  <nav> 
   <a href="#">Lorem </a> 
   <a href="#">Lorem </a> 
  </nav> 
  <main>
    Lorem ipsum 
   <br>Lorem ipsum 
   <br>Lorem ipsum 
   <br>Lorem ipsum 
   <br>Lorem ipsum 
  </main> 
  <footer>
    Lorem ip 
  </footer>  
 </body>
</html>

Related Tutorials