2-column Layout With Footer And Absolutely Positioned, 100% Height Right Column

Question

I have a simple two column layout:

Solution 1:

Here is One way to do this, the important properties I've used are:

box-sizing:border-box -------- padding ----- display:table-cell ----position:relative for footer --

First Snippet With Few Content

* {
  margin: 0;
  padding: 0
}
html,
body {
  height: 100%
}
#cont {
  box-sizing: border-box;
  padding-bottom: 70px;
  display: table;
  width: 100%;
  height: 100%;
}
.footer {
  position: relative;
  top: -70px;
  height: 70px;
  z-index: 10;
  background: red;
}
.left-column > div {
  background: blue;
  padding: 20px;
  color: white;
}
.right-column {
  background: orange;
}
.left-column,
.right-column {
  box-sizing: border-box;
  min-height: 100%;
  display: table-cell;
  width: 50%;
}

<divid="cont"><divclass="left-column"><div><h1>Content</h1></div></div><divclass="right-column"></div></div><divclass="footer"></div>

Second Snippet With More Content With Scrollbars

* {
  margin: 0;
  padding: 0
}
html,
body {
  height: 100%
}
#cont {
  box-sizing: border-box;
  padding-bottom: 70px;
  display: table;
  width: 100%;
  height: 100%;
}
.footer {
  position: relative;
  top: -70px;
  height: 70px;
  z-index: 10;
  background: red;
}
.left-column > div {
  background: blue;
  padding: 20px;
  color: white;
}
.right-column {
  background: orange;
}
.left-column,
.right-column {
  box-sizing: border-box;
  min-height: 100%;
  display: table-cell;
  width: 50%;
}

<divid="cont"><divclass="left-column"><div><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1></div></div><divclass="right-column"></div></div><divclass="footer"></div>

Solution 2:

here is a fiddle http://jsfiddle.net/ysfeuzL3/3/

I used a little javascript for the solution.

Now as per your requirement the 2 columns are properly aligned with the footer always at the bottom of the divs ( not the window) and also the right column is always extending to the full height to the footer.

Hope this helps

Code snippet....

functionheightAdjust() {
  lHeight = $(".left-column").outerHeight();
  rHeight = $(".right-column").outerHeight();
  if (lHeight >= rHeight) {
    $(".right-column").outerHeight(lHeight);
  }
}

heightAdjust()

$(window).on('resize', function() {
  heightAdjust()
})

$(window).on('load', function() {
  heightAdjust()
})

h1 {
		  padding: 20px;
		}
		.left-column {
		  float: left;
		  background: red
		}
		.right-column {
		  float: right;
		  background: blue;
		}
		.clearfix {
		  clear: both;
		}
		.footer {
		  background: aqua;
		}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><body><divclass="parent"><divclass="left-column"><h1>Content</h1><br/><h1>Content</h1><br/><h1>Content</h1><br/></div><divclass="right-column"><h1>right</h1><br/><!-- remove these to see the height adjust --><h1>right</h1><br/><h1>right</h1><br/><h1>right</h1><br/><h1>right</h1><br/><h1>right</h1><br/><h1>right</h1><br/><h1>right</h1><br/><h1>right</h1><br/><h1>right</h1><br/><h1>right</h1><br/><h1>right</h1><br/><h1>right</h1><br/><h1>right</h1><br/><!-- remove these to see the height adjust --></div></div><divclass="clearfix"></div><divclass="footer"><h1>FOOTER</h1></div>

Solution 3:

jquery is used in this solution. heres the fiddle. It accounts for the following requirements:

-the right column needs to extend to the bottom of the scrollable page regardless if it has more content or less content than the left column

-no absolutes

-footer is on the bottom of the page

-the min height of the right column reaches to the bottom of the window

css:

h1 {
    padding: 20px;
}
.left-column {
    width: 50%;
    display:inline-block;
    /* background-color: blue; */
}
.right-column {
    width: 50%;
    min-height: 100%;
    display:inline-block;
    float: right;
    background-color: lightblue;
}
.footer {
    text-align: center;
    width: 100%;
    display:inline-block;
    /* background-color: yellow; */
}

jquery:

var leftHeight = $('.left-column').height();
var rightHeight = $('.right-column').height();
var windowHeight = $(window).innerHeight();
var footerHeight = $('.footer').height();

console.log(leftHeight, rightHeight, windowHeight);

if(leftHeight > windowHeight && leftHeight > rightHeight) {
    $('.right-column').height(leftHeight);
}
if(windowHeight > leftHeight && windowHeight > rightHeight) {
    $('.right-column').height(windowHeight - footerHeight);
}

Html5 Log