2 Columns with sticky footer in the left column - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:2 Column

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

Description

2 Columns with sticky footer in the left column

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">

html, body {
   width: 100%;
   height: 100%;
   min-height: 100%;
   overflow: hidden;
}
.container {<!--from w  w  w  .  j a v a 2s. c  o  m-->
   width: 100%;
   height: 100%;
   min-height: 100%;
   overflow: hidden:
}
.column {
   width: 50%;
   float: left;
   height: 100%;
}
.cutter {
   background: orange;
   position: relative;
   overflow-y: scroll;
   height: calc(100% - 200px);
}
.col2 {
   background: #bada55;
}
.footer {
   bottom: 0;
   height: 200px;
   left: 0;
   right: 0;
   width: 100%;
   background: #bababa;
}


      </style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="column col-1"> 
    <div class="cutter">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus autem. 
    </div> 
    <div class="footer">
      footer 
    </div> 
   </div> 
   <div class="column col-2">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum omnis? 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials