I have an easy task: stick a footer to the bottom (sticky footer).
I searched several threads on stackoverflow and google.
It seems that there are two techniques:
http://ryanfait.com/sticky-footer/layout.css,http://www.cssstickyfooter.com/style.css
( resetting all elements padding and margin, stretching wrapper, clearing both or other additional mods)
Absolute positioning
The first looks for me like some hack (and didn't work either) so I wanted to stick to the absolute positioning (bottom: 0;) but here I mentioned that pages with large content (many paragraphs) the footer hangs in the middle when I scroll down...
However here is the fiddle, hope somebody finds my error:
http://jsfiddle.net/379gr/
Regards
This is FooterStick: http://jsfiddle.net/jAbw4/.
Back to your code. Set the #content_wrapper's property 'position' to relative. Otherwise, the containing block will be the initial containing block. The initial containing block covers the area of the viewport and as a result of that, your footer behaves as described in your question.
By the way: Cameron Adams writes about a more robust method of positioning a footer: FooterStickAlt. He prefers FooterStickAlt since a painting error in older versions of gecko browsers and IE's can be observed (when FooterStick is used): the footer is not positioned correctly when the height of the content varies a lot during the loading process. So therefore if for example pictures with no dimension information are included, the absolute positioned element remains at the position that is determined first time around and doesn't move with the growing content down. FooterStickAlt doesn't have this problem.
Check it out: http://jsfiddle.net/sTW6t/1/
This is what I made a while ago when using a sticky footer with a relative position. Let some jquery do the trick and voila ;-) What it does is calculating the height so the footer knows where he needs to stay, sticky.
$(function() {
function positionFooter() {
var windowHeight = $(window).height();
var documentHeight = $('#pagewrap').height();
if (windowHeight > ($('#content').height() + $('#header').height())) {
var pagewrapHeight = windowHeight - $('#footer').height();
$("#pagewrap").height(pagewrapHeight);
}
}
positionFooter();
$(window).resize(positionFooter)
});
Cheers!
Related
I'm wondering what's the best way to deal with this: I have two div in document flow (nav + content), positioned as relative.
In some situations, I will need to give the nav a fixed position. As this removes the nav from the flow, the content div is no longer properly located below. I could add the content some top-margin to compensate, but this would have to be computed because the nav doesn't have a set height (in my example, it's 50% of the window height).
Any suggestion?
JSFiddle: http://jsfiddle.net/6gkVS/
The best way to calculate a number and apply somewhere else, is javaScript, because you have to find that number after the DOM is loaded.
I'm going to just say that as of (this date) you shouldn't be using fixed positioning at all without testing for touch with modernizr, and only in the case that it's "no-touch" use fixed, due to the less that adequate browser support on mobile and touch enabled desktop. Try one out at a store and you'll see what I mean. Jumpy weird fixed headers everywhere.
The fact that your divs are relative doesn't really matter.
The best thing to do, is run modernizr. It will spit out a no-touch class on your html that you can use to style with.
.no-touch nav {
position: fixed;
top: 0; left: 0;
}
Then with jQuery, you can do something along these lines - if you are using box-sizing: border-box (which I suggest) than you'll want to use '.outerHeight()' to be sure to include padding and borders. You'll also only want a fixed header when the screen is big enough to accommodate it.
var windowHeight = $(window).height();
var navHeight = $('nav').outerHeight();
if ( windowHeight > 600 ) {
$('nav').addClass('fixed-nav');
$('section').css('margin-top', navHeight);
}
Here is a fiddle. I hope that helps. Sorry there is no way to do it with CSS yet. That would be cool.
I'm trying to use a sticky footer, but it seems to having a conflict with my css, I'm following this tutorial, but I want to know why the footer is in the middle of the page, what do I have to do to fix it.
My code:
jsfiddle.net/q2Vuq/
The reason why you're seeing this strange behaviour with the sticky footer is because of your usage of position:absolute; on a number of your elements. Namely, the ones wrapped within the #navigation div.
Take a look at this (this JSFiddle just illustrates the problem more clearly):
I've given the offending elements all a background colour (as well as the body), so you can see that these elements are actually causing the scroll bar to extend beyond the height of the body. Absolute positioning actually takes them outside of the layout - meaning they don't cause their parent #navigation to expand, which in turn does not cause its parent .page-wrap to expand, which ultimately results in the footer not getting moved down. The footer gets put to the bottom of the body (as a result of the sticky footer CSS), which isn't quite low enough since the absolute-positioned elements extend even further below (as they are ignored by the body).
So, with that in mind, how do you fix this behaviour? Unfortunately, your sticky footer relies largely on the assumption that all content will be figured into the layout above it, or at least that the wrapper element above it will be tall enough to account for all its contents. This makes your use of absolute positioning hard to keep.
The best solution is probably to remove your current usage of absolute-positioned elements in your document, and rework how you're going to place your elements. Since I don't know what design you're actually aiming for, I can't provide an example of this. An alternative is to place an internal wrapper element inside of .page-wrap, with a min-height set such that it goes below even the lowest absolute-positioned element. However, this second method isn't too flexible, and I wouldn't recommend it.
If this isn't what you were looking for, or need more assistance in this particular matter, let me know and I'll be happy to help further. Good luck!
I have an <article> element with three children: a header, a content div, and a footer. The article is absolutely positioned with height and width set, so that it fits nicely into a grid of articles. The header has some variable content, such as the article title, date, etc. and is allowed to expand as it needs. The footer is absolutely positioned within some space set aside in the article by padding the bottom of the article. The content div, however, refuses to play nicely.
What's happening is that the grid_content div just takes up however much space it needs to accommodate its content, overflowing the <article> element as it does so. I'd figure out some explicit height to set on it, but both the <article> height and the header height are variable, depending on how many spaces it takes up in the grid and what the article title is, respectively.
Is there some clean way to get the div to respect its containment, or will I need to do some ugly JS hacks to get it to stay put?
Thanks!
http://jsfiddle.net/j2fE4/
OK, so I did manage to solve this, but the solution was a two-part deal involving JavaScript.
First, I used some custom JavaScript to calculate the appropriate height for the .grid_content elements, pasted here for reference. The solution isn't general to other projects, but should illustrate the thought process.
function resizeContentElements() {
$('div.grid_content').each(function(i, element){
var $element = $(element);
var parentHeight = $element.parent().height();
var elementPadding = parseFloat($element.css('padding-top')) + parseFloat($element.css('padding-bottom'));
var siblingSpace = $element.prev().height() + parseFloat($element.prev().css('padding-top')) + parseFloat($element.prev().css('padding-bottom'));
$element.height(parentHeight - siblingSpace - elementPadding);
});
}
After that, I grabbed http://dotdotdot.frebsite.nl/ and applied it to the div.grid_element collection. Everything is getting ellipses just fine, though the point at which the content gets cut off with ellipses does not seem that even, yet. My best guess is that the irregular (and often invalid) markup in those containers is messing with it.
This seems like it should be the easiest thing in the world, but I'm having difficulties. I'm started to think I didn't know as much about CSS as I thought, or CSS was designed more poorly than I thought.
I have a page. At the top, there's an arbitrary amount of markup. Then there's a block element. All I want to do is make this block element extend its height to the bottom of the window.
See http://jsfiddle.net/vHVeC/4/. It's close, but the last block element extends beyond the visible area of the browser, creating scrollbars. No content should extend beyond the dimensions of the viewport (ie there should be no scrollbars).
How can I do this with having to use JavaScript?
Apparently, CSS has massive troubles finding heights. Widths, no worries.
Using Javascript, you'd go:
//Grab div element
var obj = document.getElementById('theDiv');
//Enable sizing
obj.style.position = 'relative';
//Force to window
obj.style.height = document.documentElement.clientHeight+'px';
Incidentally, in your Fiddle, the plaintext node above the div is offsetting the div below. It's finding 100% of the body height, but then being bumped down, causing the scrollbar. The way to fix this in CSS is position:absolute;left:0;top:0 which locks it in place.
Also note that in any of these cases, if you do end up scrolling (e.g. to 150%), you'll see the bottom edge of your div down there at 100%.
You've hit the css box model problem. A quick and dirty solution is to set the overflow: hidden property to prevent the scrollbars but you should be very careful doing this. You will need to make sure your content fits on screen as any content extending beyond the block element will be inaccessible to users.
This is how you can do it using a table (It's pure CSS):
http://vidasp.net/tinydemos/table-layout.html
I'm floating a div to the top of the window. However, it's covering the content at the top of the page, that is, it's not pushing down the very top of the page. Yet I see Stack Overflow doing this with their notification bar, because it's not covering the username/rep/links. Is there a way I can replicated this with CSS?
You can set the margin-top of the outer container object to the height of the floating div:
<div id="outerContainer">
... page content goes here ...
</div>
<div id="floatingNotification">
</div>
Then in css:
#floatingNotification
{
...
height: 20px;
}
#outerContainer
{
margin-top: 20px;
}
In the case of Stack Overflow, I think there's a good chance that they're using jQuery to manipulate the page contents. I haven't explored the linked scripts, and I've not got any notifications to check with, but I'd hazard a guess that it's something like:
$(document).ready(
function() {
var element = '<div id="notification"></div>';
var text = '<p>The text to show in the notification thingumabob.</p>';
$('div#wrap').prepend(element).find('#notification').prepend(text).css('display','none');
if ('#notification') {
$('div#notification').slideDown('slow');
}
}
)
Please be aware that I'm incredibly new to jQuery -and, frankly, JavaScript in general- so there's every chance that I've suggested something hideously wrong. But, having tested it, the concept works. Even if the element you want to add is floated or absolutely positioned the slideDown() seems to take care of moving the page contents in order to avoid it covering up other elements.
This may, or may not, be some coincidence in my set-up, though.
The answer to this depends on whether you're using a relative or absolute positioned float. If it's absolute, set your float div to for example {top: 20px;}. If it's relative, use either padding-top, margin-top (or margin-bottom on an element that's above it).
What works best across the common browsers depends on the overall picture.