I would like to mimic this layout, but I am having some trouble figuring out how to go about it.
Mainly, the trouble I am having is with the white login content area. I would like to do exactly what they do as have the white area stretch a bit further than the height of the page and then have the footer attached to the bottom.
I know for a fact that they are NOT using a fixed width height in pixels because I measured it on 1600X900 and then 1024X768 and the white content area is different height on each resolution.
I think the approach they are using focuses on having the white content area extend a little bit longer than the height of the page and then they attach the footer, but I just have no idea where to start… maybe Javascript JQUERY or something?
I was thinking that I could maybe set the height in pixels to something like height: 816px; in CSS, but then the scrolling action would be too great for smaller screen resolutions. Also, people using IMACS or whatever with HUGE screen resolutions would then get the grey background color set on the container outside the white content area underneath the footer which would look bad.
It seems you want a 100% tall page, but with a twist (in that the footer is out of view. I kinda don’t know why you’d want that, but nevertheless …). Having a 100% tall page is not all that easy with CSS, but it can be done, as explained in detail here:
One of the keys to it is the min-height: 100%, but one has to be careful with that. You could modify that page by just not placing the negative top margin on the footer … if that’s really what you want.
lol - I would say that the page is broken and that they were actually trying for a sticky footer as that design is nonsense and most people would not know that a footer was there and would miss it.
The sticky footer approach would be better in this case.
Your sticky on the sticky footer is great. I initially wanted the footer to go beneath the fold because the footer is rather ugly and I just wanted to fill the rest of the page with white space and hide it kind of. Well, I guess it makes you look stupid to do such a thing so I am following your excellent sticky but I ran into a problem with the design I want to implement.
If you look at the test page, you will notice the <div id=”content”> has a white background and I wanted to stretch that white area to the bottom of the footer, but I’m lost as how to make that happen. Any help would be further appreciated.
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%; /* needed to base 100% height on something known*/
background-color: #ddd;
text-align: center;
}
#outer {
min-height: 100%;
margin-top: -40px; /*footer height - this drags the outer 40px up through the top of the monitor */
}
#top_grey {
border-top:40px solid red; /* soak up negative margin and allows header to start at top of page*/
height: 6px;
background-color: #848484;
}
#body_cont {
width: 960px;
margin: auto;
}
#content {
background-color: #fff;
}
#footer {/* footer now sits at bottom of window*/
background:yellow;
width:960px;
margin: auto;
height:40px; /* must match negative margin of #outer */
}
</style>
</head>
<body>
<div id="outer">
<div id="top_grey">
</div>
<div id="body_cont">
<div id="header">
<h3>Header and Navi goes here</h3>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br/>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
</div>
</div> <!-- end of outer -->
<div id="footer">
<h3>The Footer</h3>
</div>
</body>
</html>
You only get one shot at the 100% high effect and that means you have to use #outer for your extending background.
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
#outer:after {
clear:both;
display:block;
height:1%;
content:" ";
}
html, body {
height: 100%; /* needed to base 100% height on something known*/
background-color: #ddd;
text-align: center;
}
#outer {
min-height: 100%;
background:#fff;
width: 960px;
margin: auto;
margin-top: -40px; /*footer height - this drags the outer 40px up through the top of the monitor */
clear:both;
}
#header {
border-top:46px solid #848484; /* soak up negative margin and allows header to start at top of page*/
background:#ddd;
padding:10px 0;
}
#content { background-color: #fff; }
#footer {/* footer now sits at bottom of window*/
background:yellow;
width:960px;
margin: auto;
height:40px; /* must match negative margin of #outer */
clear:both;
}
</style>
</head>
<body>
<div id="outer">
<div id="header">
<h3>Header and Navi goes here</h3>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
</div>
<!-- end of outer -->
<div id="footer">
<h3>The Footer</h3>
</div>
</body>
</html>
You can just rub it out in the header with a background color wherever you don’t want it to show.
