Menu
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 within each column is dynamic, and thus 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" has:
.right-column {
position:absolute;
height: 100%;
right: 0px;
background-color: blue;
}
Full JSFiddle link: http://jsfiddle.net/gsmbzaz9/1/
So, of course, there's many issues here.
Firstly, it seems that when I say height: 100% of the <body> or <html> element, that means the screen height (not the page height), so when I position the footer with bottom: 0 relative to body, it moves the footer to the bottom of the screen - not the bottom of the page.
That would be fine if I wanted to use position: fixed with the footer, so that the footer was always visible as you scroll. But here I want the footer to only be visible if you scroll all the way to the bottom.
Secondly, the right column is TALLER than the left in this example. So the content spills over beyond the bottom of the parent div, and worse, the blue background is clipped.
So, ultimately I'm looking for this layout to render as follows:
+------+-------+
| | |
| LEFT | RIGHT |
| | |
+------+ |
| |
| |
+--------------+
| FOOTER |
+--------------+
...where the entire right column is blue. We also may have a situation wherein LEFT is taller than RIGHT, in which case the blue background behind RIGHT will be fine, but the LEFT column content spills over the footer.
This seems like a pretty common layout - I'm surprised how much difficulty I've had. I've googled around trying to learn about various techniques for positioning a footer div at the bottom of the page, but none of the techniques I've seen deal with the case when there is an absolutely positioned column that lies outside the flow of the document.
So, what are some techniques using CSS to achieve the specified layout, taking into account the requirement thats:
The exact height of the left and right columns cannot be known (due to dynamic content)
The RIGHT column must always have a background color that extends to the bottom footer
The footer stays firmly planted at the bottom of the page (page, not screen) and is only visible when you scroll down to the bottom (or if the content is small enough that there are no scrollbars)
286
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 --
* {
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>* {
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>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....
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
