Make left column in 2 column layout take up 100% height - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:2 Column

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

Description

Make left column in 2 column layout take up 100% height

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 {height: 100%;}
body {height: 100%; }
* {margin:0;}
.wrapper{<!--from w w w .  ja v a2 s . co m-->
   height:100%;
}
.clear {clear:both}
.header{
   height:50px;
   background-color:rgba(0,255,0,0.5);
}
.content{
   padding-right:100px;
   display: table;
   height: 100%;
}
.wrapper2 {
   height: 100%;
}
.leftside{
   display: table-cell;
   width:20%;
   background-color:rgba(0,0,255,0.5);
   height: 100%;
}
.rightside{
   display: table-cell;
   width: 80%;
   background-color:rgba(255,0,255,0.5);
   height: 100%;
}
.stickyfooter{
   height:50px;
   background-color:rgba(255,0,0,0.75);
   z-index:1000;
}
.wrapper2:after {
   content: "";
   display: block;
   height:50px;
}


      </style> 
 </head> 
 <body> 
  <div class="wrapper"> 
   <div class="header">
     Header 
   </div> 
   <div class="wrapper2"> 
    <div class="content"> 
     <div class="leftside">
       Left Menu 
      <br> 
      <br> Home 
      <br> 
      <br> Page #1 
      <br> 
      <br> Page #2 
      <br> 
      <br> Page #3 
      <br> 
      <br> 
     </div> 
     <div class="rightside">
       Right Content (lorem ipsum forgot the rest) (lorem ipsum forgot the rest)(lorem ipsum forgot the rest) (lorem ipsum forgot the rest)(lorem ipsum forgot the rest) (lorem ipsum forgot the rest)(lorem ipsum forgot the rest) 
     </div> 
    </div> 
   </div> 
   <div class="stickyfooter">
     Footer 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials