I have a layout with a sticky footer. The problem is that the actual height of the main center content is incorrect. Although it hides behind the footer and the end user does not see this, it causes problem when centering a map for example.
How do I shorten the height of the content so it stays above the footer so the real content height is rendered (while maintaining 100%). To illustrate, I have a working example here:
http://jsfiddle.net/mp8nr/43/
When you use Firebug to hover over the element, you will see that the main content is actually underneath the sticky footer. I just need to move it up while not cutting off the top but all my attempts have failed. I would greatly appreciate any help.
EDIT: There was more than one thing wrong with your layout. Here is a fixed version:
http://jsfiddle.net/Ym3YP/
Okay, so you haven't actually implemented a sticky footer. You just put a footer with fixed positioning. When you use either fixed or absolute positioning, the element in question is taken out of your HTML flow which is why your main-content div extends all the way to the bottom. It does not see or recognize the footer being in the way!
Here is how to properly implement a sticky footer that avoids these issues:
Taken from Ryan Fait:
Sample HTML:
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
Sample CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
Also, check out this Smashing Magazine article It explains in depth the basics of CSS flow which should help you avoid these types of issues. It's a must read for anyone getting into CSS and will save you from many headaches in the future.
Related
I'm building an angular application that frequently uses nested views. Certain views, however, are taller than the other elements on the page and end up extending well beyond the end of the parent view.
I'm using Ryan Fait's Sticky Footer so I have a wrapper around a containing div set to height:100% and I would have expected the page to just adapt and move the footer to the bottom of the nested view however I'm seeing the style elements of the footer border and background-color are remaining at end of the parent div while the content of the footer is being pushed to the end of the nested div.
Including an image as I'm struggling with getting the language exact:
I'm really looking for any solution from fixing the css to something that seems hackier like changing the footer or using ng-if/ng-class on certain pages. I'm imagining I'm misunderstanding something about CSS/UI-Router but I can't really track it.
The code isn't really interesting but here is it?
CODE
.wrapper {
min-height: 100%;
margin-bottom: -50px;
}
.push {
height: 50px;
}
.footer {
display: block;
height: 50px;
}
.nested {
max-height: 500px;
}
<body>
<div class="wrapper">
<div>
<h1>Some text</h1>
<ui-view class="nested"></ui-view>
</div>
<div class="push"></div>
</div>
<footer class="footer">
<span>some copy</span>
</footer>
</body>
If you use percentage values for height (i.e. a relative height), the parent element heights have to be defined too. In your case you also need height: 100% on body and html, like
html, body {
height: 100%;
}
I am currently trying to use a sticky footer that I have used successfully many times before on various websites that I've built. Here is the link: http://ryanfait.com/sticky-footer/
The problem this time, is that I'm trying to make this more responsive, and hence I don't want to use a specific pixel amount for the height, so I tried switching to percentages:
html, body {
height: 100%; margin: 0px; padding: 0px;
}
#wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: -25%;
background: lime
}
#spacer{
background: blue;
height: 25%; /* This should be exactly the same as #footer height. */
}
#footer{
background: magenta;
height: 25%;
}
And here is the HTML:
<!DOCTYPE html">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="https://localhost/wordpress/wp-content/themes/TesterTheme/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
Content goes here.
</div><!-- End Wrapper -->
<div id="spacer"></div>
<div id="footer">
</div>
</body>
</html>
As I said before, when I use a specific pixel amount, like 200px, for the height (and change wrapper margin-bottom to -400px) it works fine. I've read that when you use a percentage for height, it is using a percentage of the height of the parent element and that I need to make sure to have all of the ancestor elements' heights defined. I think I do though... as body and html are the only ancestors of footer. This is actually what it does. I've measured it with a pixel ruler and the footer and spacer measure out to 25% of my view port. Yet for God knows why, a scroll bar appears on the side of my browser(Yes... it's full screen), as if the body has some how magically extended itself an extra fifty pixels or so. Please help, I've spent nine hours on this so far, searching all over and trying many different tactics but I always get the same result. Why don't the percentages yield the desired result?
There are plenty of options to fix this. Using percentages in the way you are is not a good idea.. it's similar to how this can change in javascript.
Personally, I'd go this route for responsive.
<div class="wrap">
<div class="stuff"></div>
<div class="stuff"></div>
<div class="stuff"></div>
</div>
<div id="footer"></div>
That way, the footer is always setting below the rest of the content. No need to specify the footer height in multiple places. Use percentages as you like with this setup.
If you're not 100% happy with it, use jQuery/javascript to stretch the content. Or even, CSS media queries.
I'm trying to implement a sticky footer which is working except that the main wrapping div's 100% height is extending way too tall (#body-wrap) and it's causing a huge gap between the content and the footer. So instead of the footer sitting at the bottom of the screen like it's supposed to, I have to scroll down the page past the huge gap to view it.
I have something like this as my HTML:
<div id="body-wrap">
<div id="content">
[about 100px of content here]
</div><!-- end #content -->
<div class="push"></div>
</div><!-- end #body-wrap -->
<div id="footer-wrap">
<div id="footer-content">
[about 300px of content here]
</div> <!-- end #footer-content -->
</div> <!-- end #footer-wrap -->
And my CSS:
html, body {
height: 100%;
}
#body-wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -300px; /* the bottom margin is the negative value of the footer's height */
}
.footer-main-wrap, .push {
height: 300px; /* .push must be the same height as .footer */
}
Anyone have any idea why the a 100% height would extend further than the content?
When you specify height as a percentage (e.g., height: 100%), that's in relation to the parent container, not the contents of the element. If you're not needing to support IE6, you'll probably find this a lot easier to implement using position: fixed for the footer.
Edit: I just noticed another thing - in your markup you have an element with ID footer-wrap, but in your CSS, you're using the selector .footer-main-wrap. Try changing .footer-main-wrap in your CSS to #footer-wrap.
Adding
height 100% to your html
and
height auto to your body will make it adjust correctly when the page isn't long enough
i have a few problems setting up a layout with horizontal sections that should have an automatic height depending on it's content.
This is my page structure.
<div id="#page-wrap">
<header>
<div class="inner">
#navigation
#logo floated right
</div>
</header>
<section id="services">
<div class="inner">
#some floated boxes
</div>
</section>
<section id="main">
<div class="inner">
#secteion content
#aside sidebar
</div>
</section>
<footer>
<div class="inner">
#footer stuff
</div>
</footer>
</div>
header, sections and footer are always 100% wide.
each section has a .inner div which is centered with margin: 0 auto.
.inner {
margin: 0 auto;
padding: 96px 72px 0;
width: 1068px;
color: #3C3C3C;
}
and as example this is my header:
header .inner {
background: #fff url('images/years.png') no-repeat top right;
position:relative;
/*height:100px;*/
}
#logo {
position:absolute;
right:70px;
top:15px;
float:right;
}
THE PROBLEM: if i don't set the header to a specific height the background image get's cut off. If i inspect the header with a develper tool like firebug the navigation inside of it is kind of outside the the header-box. So if i don't set the height of 100px the horizontal navigation cuts off the the background image - even though it's in the same header.
any idea what i have to consider here.
you state that it should have an automatic height depending on its content and then later state the problem is the background gets cut off. so, what exactly are you looking for? a min-height of 100px which expands if the content is larger? or did you expect the nav to be 100px in height (thus forcing the header to 100px)? its a bit confusing... at any rate, the header will have a height of zero if the height is not set and it's children are floats. it sounds to me as if you want the header to be 100px for the purpose of showing the entire background - if so, just set the headers height to 100px (as you've done)
edit// you've also stated that the logo is floated, but then show that its positioned absolutely - which is it? and how is the nav positioned? more information is needed
header, section and footer elements are not container elements - if you want them to behave as if they were you have to set them display: block - this will make them to behave as normal div would
I think this may be a clearfix issue--
you could try adding <div style="clear: both;"></div> before you close your header, or add the following properties to your header
.header {
overflow: hidden;
display: inline-block; /* Necessary to trigger "hasLayout" in IE */
display: block; /* Sets element back to block */
}
however if your navigation will have things that hang out of its container sometimes (like a dropdown), it's best to use something like the method at http://www.positioniseverything.net/easyclearing.html.
finally, you can also try wrapping the whole thing (header, and content) in another div which will only have the background property. that way the bg image will not get cut off.
I'm having a problem with my site http://artygirl.co.uk/pixie/about/ I can't seem to get the footer to automatically stick to the bottom of the browser, and show the rest of my background.
Is there a solution better than using position:fixed or absolute?
I think there are possibly other styles over-riding some tests I do in firebug.
Thanks for your help
Regards
Judi
CSS:
.podbar {
bottom:0;
position:fixed;
z-index:150;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+
(document.documentElement.clientHeight-this.offsetHeight)));
height:35px;
}
HTML:
<div class="podbar">
Put your footer here
</div>
This will create a sticky that will always appear at the bottom of the page and overlay everything. Just add extra margin/padding to the bottom of your main container divs equal to the height of footer +5px so it doesn't overlay your content.
Works in pretty much every browser I have tested.
I've used the technique in this article before: CSS layout: 100% height with header and footer. It does require some extra markup in your HTML.
This is always a bit difficult, you could increase the min-height of your content area, but even then if someone has a really big screen you'd see the same thing.
You could use a bit of JavaScript to increase the min-height if someone has a huge viewport but that's still less than elegant. I'm not sure if there is a CSS-only solution to this.
If you want to try the above the code I just posted here: Is detecting scrollbar presence with jQuery still difficult? may be of use to you.
Set the height of html and body to 100%, insert a container div with min-height 100% and relative position, and nest your footer with position: absolute, bottom: 0;
/* css */
html, body {
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#footer {
position: absolute;
bottom: 0;
}
<!-- html -->
<html>
<head></head>
<body>
<div id="container">
<div id="footer"></div>
</div>
</body>
</html>
Here you have an example and explanation http://ryanfait.com/sticky-footer/
Edit: Since that site is offline, here is another example of this working: https://gist.github.com/XtofK/5317209 and https://codepen.io/griffininsight/pen/OMexrW
document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('nav');
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
border: 1px solid #ff00ff;
height: 50px; /* '.push' must be the same height as 'footer' */
}
footer {
}
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
You could set a min-height on #content. This won't fix the footer to the bottom of the browser specifically, but will ensure that you can always see a certain amount of the background.
As an alternative, using JavaScript, you could determine the height of the browser window and then calculate the min-height for #content, and apply it using JavaScript. This would ensure the footer is always in the correct place.
I've figured it out. Html had a css property for the background saying the colour white.
I always prefer page wise footers because of variable content on pages. I use a top margin of 5em for my footers. Most often than not, we know the height of content that can occur on pages.
If you use the Compass library for Sass, there is also another option. You can use Compass’s sticky-footer mixin (demo). It requires that the footer be fixed-height, and that your HTML has a certain general structure.
Don't use position:absolute use position:relative instead.
.footer {
z-index:99;
position:relative;
left:0;
right:0;
bottom:0;
}
position: absolute will stick it to the bottom of the screen while position relative won't ignore other divs, so it will stay at the bottom of the full page.