column height

Adjusts the height of the column to the full height of the window. Good for something that is fixed position and needs to always go to the bottom of the page

by Oliver Kelso

HTML

<div id="columnWrap">
   <div class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend elit nec arcu semper fringilla. Pellentesque sit amet eros ac est pulvinar commodo id at justo. Morbi aliquam ipsum at quam tempor rhoncus.
       
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend elit nec arcu semper fringilla. Pellentesque sit amet eros ac est pulvinar commodo id at justo. Morbi aliquam ipsum at quam tempor rhoncus.
   </div>
    <span class="columnDivider"></span>
   <div class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend elit nec arcu semper fringilla. Pellentesque sit amet eros ac est pulvinar commodo id at justo. Morbi aliquam ipsum at quam tempor rhoncus.
       
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend elit nec arcu semper fringilla. Pellentesque sit amet eros ac est pulvinar commodo id at justo. Morbi aliquam ipsum at quam tempor rhoncus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend elit nec arcu semper fringilla. Pellentesque sit amet eros ac est pulvinar commodo id at justo. Morbi aliquam ipsum at quam tempor rhoncus.
       
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend elit nec arcu semper fringilla. Pellentesque sit amet eros ac est pulvinar commodo id at justo. Morbi aliquam ipsum at quam tempor rhoncus.
   </div>
    <span class="columnDivider"></span>
   <div class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend elit nec arcu semper fringilla. Pellentesque sit amet eros ac est pulvinar commodo id at justo. Morbi aliquam ipsum at quam tempor rhoncus.
   </div>
    <div class="clear"></div>
 </div>

CSS

#columnWrap{
    min-height:150px;
    height:auto;
    border:solid 1px #CCC;
    padding:2px 2px 4px 2px;
}

.column{
    height:100%;
    width:175px;
    border:solid 1px #CCC;
    float:left;
    margin:0px 3px 0px 3px;
    padding:4px;
}

.columnDivider{
    width:1px;
    float:left;
    height:100%;
    border-left:dashed 1px red;
    margin:0 2px 0 2px;
}

.clear{
    clear:both;
}

JavaScript

$(document).ready(function() {
    
  var newHeight = $("#columnWrap").height();
  $(".columnDivider, .column").height(newHeight);
  
});