Create A Flexbox with Sticky Footer - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Container

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Flex Container

Description

Create A Flexbox with Sticky Footer

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  Undistraction</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
  <style>

html {<!--from  w w w . j a  v a 2 s .  c om-->
   box-sizing: border-box;
}
*, *:before, *:after {
   box-sizing: inherit;
}
.Wrapper {
   display: flex;
   flex-direction: column;
}
.Page {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   flex: 1;
}
.Page-header {
   background: blue;
}
.Page-footer {
   background: green;
}
.Page-body {
   background: red;
   flex: 1;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="Wrapper"> 
   <div class="Page"> 
    <header class="Page-header">
      HEADER 
    </header> 
    <div class="Page-body">
      BODY 
    </div> 
    <footer class="Page-footer">
      FOOTER 
    </footer> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials