Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
<div id="page">
    <div id="sticky-footer-wrap">
        <header class="site-header">
Header
      </header>
            <div class="site-main">
            <div id="primary">
            <h2>Primary content</h2>
            <h1>Layout Features</h1>
            <ul>
                <li>Header (fixed height - you must set this height in CSS)</li>
                <li>3 fluid columns</li>
                <li>100% or full height columns (jQuery)</li>
                <li>Sticky footer (fixed height - you must set this height in CSS)</li>
            </ul>
            </div>              
            <div id="secondary">
                <h3>Secondary content</h3>
            </div>
            <div id="tertiary">
                <h4>Tertiary content</h4>
            </div>
        </div>
    </div>
</div>
<footer class="site-footer">
    <h3>Footer (sticky)</h3>
</footer>  
  
​
</body>
</html>
 
 $(window).on('load resize', function() {
     $("#primary").css("height", "");
     $("#secondary").css("height", "");
     $("#tertiary").css("height", "");
     columnHeight();
​
 });
​
​
 // Make columns 100% in height
 function columnHeight() {
     if ($(window).width() >= 768) {
​
         // Column heights should equal the document height minus the header height and footer height
         var newHeight = $(document).height() - $(".site-header").height() - $(".site-footer").height() + "px";
         $("#primary").css("height", newHeight);
         $("#secondary").css("height", newHeight);
         $("#tertiary").css("height", newHeight);
     }
​
 }
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
carasmopro
0viewers