Fill page with flexbox, single column with footer - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Column

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

Description

Fill page with flexbox, single column with footer

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <style type="text/css">

html {<!--from  ww  w.j  a va  2 s  .c o  m-->
   height: auto;
   min-height: 100%;
   margin: 0;
}
body {
   margin: 0;
   display: flex;
   flex-direction: column;
   height: auto;
   min-height: 100%;
   position: absolute;
   width: 100%;
}
main {
   flex-grow: 1;
}
div {
   background-color: yellow;
   height: 200px;
}

      </style> 
 </head> 
 <body> 
  <main> 
   <div>
     main 
   </div> 
  </main> 
  <footer>
    footer 
  </footer>  
 </body>
</html>

Related Tutorials