Set container to 100% screen height - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Height

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

Description

Set container to 100% screen height

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style class="cp-pen-styles">
html, body {
   padding: 0;
   margin: 0;
   height: 100%;
}
/* Allows the height to span 100% height of the screen */
.container {<!--   ww w .  j  a  v a  2s  .  c o  m-->
   display: inline;
}
.wrap {
   padding: 50px 25px;
}
.sidebar {
   background: #0088ce;
   color: #fff;
   float: left;
   height: 100%;
   width: 30%;
}
.content {
   float: left;
   width: 70%;
}

      </style> 
   </head> 
   <body> 
      <div class="container"> 
         <div class="sidebar"> 
            <div class="wrap"> 
               <h3>Some sidebar content</h3> 
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia a nihil quisquam excepturi beatae mollitia suscipit accusamus earum similique dolores enim architecto doloribus sequi animi sit amet vel asperiores placeat!</p> 
            </div> 
         </div> 
         <div class="content"> 
            <div class="wrap"> 
               <h1>TIL How to get height: 100% working</h1> 
               <h2> 
                  <code>.container { display: inline }</code> 
               </h2> 
               <h2>Done.</h2> 
            </div> 
         </div> 
      </div>  
   </body>
</html>

Related Tutorials