This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
How do you get the footer to stay at the bottom of a Web page?
The 2nd background image on this page isn't properly positioned... I'm struggling to come up with a fix... I need the footer to be at the bottom of the page, always. min-height doesn't work because I need it to always remain at the bottom regardless of their resolution.
Is there a CSS fix for this?
-URL REMOVED-
Sounds like you are looking for a sticky footer.
http://ryanfait.com/sticky-footer/
* {
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/
*/
You must set html and body to have height:100%;
then to overcome another issue with body only filling the viewport, you need to put a wrapper around all your content, set its min-height to 100% and put the background images to that.
Demo code : http://jsfiddle.net/fNwNn/3/
Live view : http://jsfiddle.net/fNwNn/3/show
I think what you want is position: fixed
Try this:
#footer
{
position: fixed;
bottom: 0px;
}
This will 'stick' the footer to the bottom of the window.
James
See if this is what you want:
http://www.designersandbox.com/code/always-bottom-footer-with-css-only-tutorials/
and a live example:
http://demo.designersandbox.com/always_bottom_footer/index.html
If you actually want the footer to be able to cover the page contents, then you should remove this line
#vc-body{padding-bottom:80px;}
from the given example.
Related
I am working on Bootstrap theme where its responsive. I disable the responsiveness on a child theme by adding a code in functions.php. All works well , no problem.
Now the parent container, is now fixed:
HTML:
<div class="container">
CSS:
.container{width: 940px;}
But I would like the footer section to have sitewide background color. How do I able to do this?
I have tried setting different methods like width:auto, width: 200% ,but its not giving me the desired result.
Supposing this is the footer section:
<footer>
My footer
</footer>
My attempted CSS on a child theme(not working)
footer {
background: #CCCCCC;
width:100% !important;
position:absolute !important;
}
Also is this possible without setting too many !important on CSS property? Thanks.
If your footer is inside the div.container which has width:940px; then giving your footer 100% width will make it 940px wide.
You need to have the footer outside the container to give it 100% width of the body.
When you give 100% width, the element gets its container's width. So in your code, even with the important keyword, it'll get the container's width (because that what 100% is supposed to do).
Just take the footer outside of the container.
Then it'll work and you won't need this !important keyword.
As others have mentioned, removing the footer from the parent container of .container will allow the width of it to be the entire size of the viewport/document.
If you are unable to change this level of structure of the HTML due to your template, you can fake the width using pseudo-elements, like so:
footer {
position: relative;
background-color: lightblue; /* Match the color of the body background */
}
footer::before, footer::after {
content:"";
position: absolute;
top: 0;
bottom: 0;
width: 9999px;
/* some huge width */
background-color: inherit;
}
footer::before {
right: 100%;
}
footer::after {
left: 100%;
}
See jsFiddle.
Taken from CSS Tricks: Full Browser Width Bars
I'm looking to position a Google Maps div with a sidebar on the right that displays listings. I want to make it so the window doesn't scroll, and the contents on the page are fluid when resizing the screen.
I have previously attempted to use box-sizing like the following:
#map-wrapper * {
box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
-khtml-box-sizing: border-box !important;
-webkit-box-sizing: border-box !important;
-ms-box-sizing: border-box !important;
}
#map-container {
position: absolute;
width: 100%; height: 100%;
margin: 0;
overflow: hidden;
border-top: 50px solid transparent !important; border-right: 350px solid transparent !important;
}
This starts to become a nightmare when trying to have a scrolling list in the sidebar. Does anyone have a good solution, or am I on the right track with box-sizing?
Box-sizing is purely optional for something like this. There are many ways to go about it, but I have one favored method that is simple and works well in old browsers like IE6.
For the various frames you are trying to create (sidebar and Gmaps/content frame) create a css rule that sets position:absolute; overflow:auto;. Now you can take advantage of a cool trick in CSS absolute positioning. If you set both top and bottom in CSS, the height is automatically calculated. Same goes for widths using left/right. So to make our two divs 100% height set top: 0; bottom:0;.
If you want the sidebar to be 300px wide and anchored to the right, then set width:300px; right:0;. For the content div, set right:300px; left:0;.
Now you need to prevent the body scrollbars from appearing. First of all, you will need to remove the default margin/padding from body by setting them to 0. Also, you need to set html & body to height:100%; (100% equals the viewing area height), other wise they default to auto which is the content's height. It is also wise to add overflow:hidden to body, since some browsers think `body{height:100%;} means they need to show scrollbars.
Here is a quick mockup on JS fiddle showing you how this works.
Elimn's suggestion did not work for me, but the following did (I created a header bar above the Google Map):
body { height: 100%; margin: 0; padding: 0; overflow: hidden; }
#map-canvas { height: 100%; overflow: auto; }
In the body:
<div id="topmenubar" style="position:relative;background:olive;height:40px;top:0;"></div>
<div id="map-canvas"></div>
I have an outer div, called #wrap, and two inner divs: #container and #footer. Content is inside #container, and is dynamic. There may be a little, there may be a lot.
When content is minimal, the footer div may appear half-way up the page. However, this changes depending on the monitor/resolution. What is 50% from bottom on a large monitor may only be 10% from bottom on a small/cluttered viewport.
If I use this css method:
body,html { height: 100%; }
#wrap { position:relative; min-height:100%; }
#container{ margin:0px 0px 50px 0px; }
#footer { position:absolute; bottom:0px; }
then the page will always extend to use 100% of the viewport and the footer will be at bottom of the viewport - exactly as required.
However, if the content increases (or if a small viewport), the footer may overwrite any content extending into its 130px height -- the footer will not bump down.
Is there a way to remedy this?
Note: I don't wish to use percentages for the footer height as it is fixed at 130px and cannot squish.
Here is a fiddle I've been using to experiment
This is the best example of sticky footer I've seen: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
UPDATE (April 2017): As the above link has become inoperable (and much time has passed since the original post) I'd like to offer the following solution to this problem:
Permanently fixed:
#container {
padding-bottom: 130px; // ...or more
}
#footer {
bottom: 0;
height: 130px;
position: fixed;
width: 100%;
}
For a dynamically fixed element, check out this jQuery plugin: https://libraries.io/bower/jquery-sticky-header-footer
I've got 60 pages all with the same footer, included with php. The amount of content varies from 300px in height to 2000+. I don't think this is possible, but it would be great if I could get the footer to sit at the bottom of the browser window, if the page is shorter than the window, and behave normally (pushed to the bottom) otherwise, with just CSS. Thanks.
I know this post is pretty old, but I found a great resource for this exact thing.
http://ryanfait.com/sticky-footer/
here is just the css:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
Good luck.
This is waaaay too late and the answer is somewhat similar to the one by Barry P.
For your wrapper css class add the following,
min-height: calc(100vh - 155px);
Note: This does not work in IE8 or lower.
here is an article that is targeting even IE7
footer stays at the bottom when there is a little content
and drags down when there is alot of content
http://snipplr.com/view/15334/
I would try give your content a min-height of say 500px...
#content {
min-height: 500px;
}
That way, even if you only had 300px of content the 500px (or longer if necessary) would make sure that the footer is pushed far enough down to be at the very bottom.
Try adding this to your CSS
#footer {position: fixed; bottom: 0;}
I have a sticky footer which works, but I'm using a tiled background image and an inner #content div. The problem I have is that the #content won't expand to fill the height of the container. I've got a demo at http://jsfiddle.net/mpRUT/1/, where I've changed the colours to illustrate. The only thing keeping #content from collapsing into oblivion when the page is empty is the min-height set on it.
Can I get it to expand to fill the container, or do I just have to set a larger min-height and lose some browsers?
The effect can be seen at http://myfitzeek.lime49.com/
IMO: Will not work 100% without min-height. (see comments)
My old answer:
Edited sample (as fork):
http://jsfiddle.net/4EtKh/1/
#wrapper: {
/*min-height:100%;*/ /* remove! */
position:relative;
height:100%; /* new! */
overflow: hidden; /* new! */
}
#content {
text-align: left;
line-height: 140%;
background: #fff;
font-size: 1.2em;
/*min-height: 80px;*/ /* remove! */
height: 100%; /* new! */
}
Chances are good that you're going to need to set min-height: 100%; and subtract the footer height using negative margin.
#wrapper { margin-bottom: -60px; }
#footer { height: 60px; }
What are your target browsers? You express some concerns about min-height - why not design the footer to look acceptable if collapsed, so that it degrades nicely in an older browser? If you're using a sidebar in your finished design, you can use .clearfix techniques to force the footer to the bottom, which means it won't necessarily be noticeable.
Aside from doing position:fixed; on the footer and using a background image on your #wrapper to give the impression of a full-height content pane, I don't know of a way to make this work without using min-height on #content (like this).