Getting column to span height of parent - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

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

Description

Getting column to span height of parent

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

div#container {<!--from w  w w. j a va 2s  .  c om-->
   background:yellow;
   min-height:500px;
}
div#header {
   background:pink;
   height:100px;
}
div#content {
   position:relative;
   background:purple;
   height: 100%;
}
div#content #left {
   float: 0;
   height: 100%;
   background:#222;
   color: white;
   width: 50%;
   position: absolute;
   left: 0;
   top: 0;
   z-index: 10;
}
div#content #right {
   float: none;
   height: 100%;
   background:
   papayaWhip;
   width: 50%;
   position: relative;
   padding-left: 50%;
   z-index: 0;
}
div#content #right img {
}
.cf:before,.cf:after {
   content:"";
   display:table;
}
.cf:after {
   clear: both;
}
      </style> 
 </head> 
 <body> 
  <div id="container" class="cf"> 
   <div id="header"> 
    <p>im header</p> 
   </div> 
   <div id="content" class="cf"> 
    <div id="right"> 
     <img src="https://www.java2s.com/style/demo/InternetExplorer.png"> 
     <img src="https://www.java2s.com/style/demo/Safari.png"> 
    </div> 
    <div id="left"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce viverra enim sit amet ante lacinia iaculis. Nullam ac nulla vel purus posuere luctus. Mauris a elit nisl. Mauris commodo convallis sem in feugiat. Suspendisse mauris leo, molestie sit amet commodo eget, mollis a nibh. Suspendisse auctor commodo interdum. Aliquam posuere, erat eget pharetra hendrerit, mi tellus tristique tellus, vel accumsan elit nisi ac diam. Morbi consequat ligula est, et volutpat ante. Curabitur pulvinar nulla non neque iaculis pulvinar sed eu sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce sodales metus et nisl dictum non ullamcorper magna blandit. Aliquam erat volutpat. Aenean id massa sed massa sollicitudin euismod sed non lorem. Sed accumsan, nisl vitae adipiscing cursus, magna enim accumsan augue, a rutrum mauris lorem non mauris. Sed consequat venenatis venenatis. </p> 
    </div> 
   </div> 
   <p>im the container</p> 
  </div>  
 </body>
</html>

Related Tutorials