2-column layout with footer and absolutely positioned, table height 100%
I have a simple two column layout:
<div class = "parent">
<div class = "left-column">
</div>
<div class = "right-column">
</div>
</div>
<div class = "footer"></div>
The content inside each column is dynamic and therefore the height of each column cannot be predicted in advance. However, I have a requirement that the RIGHT column has a background color that ALWAYS extends to the bottom of the page, even if the right column is much shorter than the left.
To accomplish this, I gave "parent" position:relative
and "right-column":
.right-column {
position:absolute;
height: 100%;
right: 0px;
background-color: blue;
}
Full JSFiddle link: http://jsfiddle.net/gsmbzaz9/1/
So of course there are many problems here.
First, it seems that when I say height: 100%
element <body>
or <html>
, it means screen height (not page height), so when I set the footer to bottom: 0
relative body
, it moves the footer to the bottom of the screen, not to the bottom of the page.
It would be nice if I wanted to use position: fixed
with a footer so that the footer is always displayed when scrolling. But here I want the footer to be only visible if you scroll all the way to the end.
Second, the right column is TALLER than the left one in this example. This way the content spills out behind the bottom of the parent
div, and worse, the blue background is clipped.
So ultimately I'm looking for this layout, which will look like this:
+------+-------+
| | |
| LEFT | RIGHT |
| | |
+------+ |
| |
| |
+--------------+
| FOOTER |
+--------------+
... where the entire right column is blue. We could also have a situation where LEFT is higher than RIGHT, in which case the blue background behind RIGHT would be fine, but the contents of the LEFT column spill over into the footer.
This seems like a fairly common layout - I'm surprised how much difficulty I had. I've searched Google trying to find out about the various methods for positioning the footer at the bottom of the page, but none of the methods I've seen are relevant to the case where there is an absolutely positioned column that is outside of the document flow.
So what are some techniques using CSS to achieve the specified layout, given thats requirement:
-
The exact heights of the left and right columns cannot be known (due to dynamic content)
-
The RIGHT column should always have a background color that extends to the footer
-
The footer snaps into place at the bottom of the page (the page, not the screen) and only appears when scrolling down to the bottom (or if the content is small enough to not have scrollbars)
source to share
Here is one way to do it, important properties that I used:
box size: border-box -------- padding ----- display: table-cell ---- position: relative for the footer -
First snippet with little 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%;
}
<div id="cont">
<div class="left-column">
<div>
<h1>Content</h1>
</div>
</div>
<div class="right-column">
</div>
</div>
<div class="footer"></div>
Second snippet with a lot of 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%;
}
<div id="cont">
<div class="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>
<div class="right-column">
</div>
</div>
<div class="footer"></div>
source to share
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 correctly aligned with the footer always at the bottom of the div (not in the window), and also the right column always reaches full height to the footer.
Hope it helps
Snippet of code ....
function heightAdjust() {
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div class="parent">
<div class="left-column">
<h1>Content</h1>
<br/>
<h1>Content</h1>
<br/>
<h1>Content</h1>
<br/>
</div>
<div class="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>
<div class="clearfix"></div>
<div class="footer">
<h1>FOOTER</h1>
</div>
source to share
jquery is used in this solution. heres fiddle . It meets the following requirements:
- the right column should extend to the bottom of the scrolling page, whether it has more content or less content than the left column
-no absolutes
-footer is at the bottom of the page
- the minimum height of the right column reaches 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);
}
source to share