This question already has answers here:
Fix footer to bottom of page
(14 answers)
Closed 8 years ago.
I have some problems with sticking my footer to the bottom of the page. At the moment when I preview it in Internet Explorer, it is centered under the rest of the content, but not at the bottom. When I want to preview it in Chrome, it keeps standing next to some other content. Could someone explain to me why and how to fix this? Below, I've included some code for reference:
HTML:
<footer class="mainFooter">
<p>Copyright © www.baica.nl </p>
</footer>
CSS:
.mainFooter{
display:block;
width:100%;
height:50%;
margin:20% auto;
color:yellow;
text-align: center;
}
If I understand your question properly, you want to make your footer stick to the bottom of the page no matter the height of its contents. To achieve this you can use this CSS
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
color:yellow;
text-align: center;
}
Then adjust your page to follow this HTML structure
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2014</p>
</div>
You also mentioned that your footer floats to one side or the othr beside other content. I am assuming this is on a multi-column layout. In which case you should utilize clear: both
.footer, .push {
clear: both;
}
Where is the rest of the html. The footer I assume is in a container and that container has to span the height of your window using something like
min-height: 700px
then in your css you set the
display: table-cell;
vertical-align: bottom;
or
position: absolute; bottom: 0;
look into the browser prefixes for your css code, and style it for each browser to prevent errors in the rendering of your html/css. Take a look at css3 schools browser support for more information, hope this helps
Related
I often use the method of an empty div to make my footer stay at the bottom of my page. The code idea is following:
<body>
<div id="canevas">
<article>My website's content</article>
<div id="push"></div>
</div>
<footer id="footer">Here my footer</footer>
</body>
The css:
html, body {
height: 100%;
margin:auto;
}
#canevas {
min-height: 100%;
height: auto;
margin-bottom: -33px;
}
#footer, #push {
height: 33px;
}
Today I'm looking for how to add a margin-top on my #caneva div without breaking the footer. Do you have any idea?
Note that my page's content can have many different size (a lot less and a lot more than 100% of the screen height).
Here a fiddle with previous code.
If using padding-top is an option, you could use box-sizing: border-box to calculate the width and height of the box including padding and border, as follows:
#canevas {
min-height: 100%;
margin-bottom: -33px;
padding-top: 50px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
WORKING DEMO.
Also it's worth noting that border-box value is supported on IE8+.
Alternatively, you could add another spacer element as the first child of the #canevas element to push down the content, as follows:
.spacer {
height: 50px;
}
<body>
<div id="canevas">
<div class="spacer"></div>
<article>My website's content</article>
<div id="push"></div>
</div>
<footer id="footer">Here my footer</footer>
</body>
This will have a promising browser support :)
UPDATED DEMO.
For further info, you could refer my answer on a similar question on SO here:
Position footer at bottom of page having fixed header
If what you mean is to keep the height of the page, then the answer is to also add margin-bottom: -63px; to your #caneva div. This way basically only the top of the '#caneva div' will change, the rest of the page will remain the same.
I created an updated fiddle here for you.
I've lost count of how many posts I've read on this subject. Frankly I am not a CSS expert. I cook-booked a 'sticky footer' that works perfectly in Firefox and Chrome but fails in IE9 and above. (Its position in IE varies with the height of the browser window. In other browsers its fixed to the bottom.)
The css is as follows:
#footer {
position:relative;
margin-top: -150px;
height: 150px;
clear: both;
bottom:0px;
}
The html (in the master page) is as follows:
<footer>
<div id="footer">
<div style="margin: auto;">
</div>
<br />
<div style="text-align: center; margin: auto; margin-left: auto;
margin-right: auto; width: 100%; margin-bottom: auto">
<p>© Copywrite blurb and date here</p>
</div>
</div>
</footer>
Suggestions?
I am a bit of a noob too, but I feel like it is the 'position: relative' which could be messing up your code. Is your footer wrapped into another div?
Maybe try wrapping your page in a content div with a height of 100%, then position relative to this, rather than the page.
Or perhaps set the body and html to have height: 100%. What is the current height of the element surrounding your footer?
Just throwing a few ideas out there. :)
For classic web sites you want to use position fixed. For a more modern, fluid, app like web application position absolute works well. You can see the latter on my demo web app, http://movies.spawebbook.com.
#footer {
position:absolute;
height: 150px;
clear: both;
bottom:0;
left: 0;
right: 0;
}
I'm learning HTML/CSS in my web standards design course this month and this week we are fixing our websites to be responsive.
I have converted all of my px to percentages and all font from px to em. I messed something up with the max-width: 100% on my gallery.
I'll post my link instead of all the codes.
http://jgoldd.github.io/wsd/index.html
Take the width and margin off your body tag. Make a class called a wrapper and add it inside your containers eg
.wrapper{
max-width:960px;
margin:0 auto;
width:100%;
}
<header>
<div class="wrapper">
// put your content in here
</div>
</header>
<div id="content">
<div class="wrapper">
// put your content in here
</div>
</div>
<footer>
<div class="wrapper">
// put your content in here
</div>
</footer>
If you don't want to do this you could just set your body to
body{
max-width:960px;
width:100%;
}
But I would change your structure to the way with a wrapper is good to practice clean code hygiene from the start :-)
Your css is too buggy. So, let me explain you a simple technique to activate responsive behavior to images
Try this code in HTML
<img class="resize" src="http://jgoldd.github.io/wsd/images/mountains1.jpg">
CSS
.resize {
max-width: 100%;
height: auto;
width: auto;
}
This code simple activates the responsive behavior on images.
Do let me know if you have any queries...! :)
You're going to need to play with it a bit, but here is a quick bit to get you going in the right direction. (remove the lines I commented with REMOVE)
#gallery li{
width: 49%;
display: inline-block;
.display: inline; /* for IE 8 */
zoom: 1; /* for IE 8 */
/* float: left; REMOVE */
}
#gallery img {
width: 100%;
/* max-width: 100%; REMOVE */
}
#gallery_container{
width: 100%;
/* width: 41.666667%; REMOVE */
}
Give it a try. Should give you better results and hopefully get you where you want to be.
Here's my footer css:
.footer {
background-color: #CACACA;
font-size: 20px;
height: 50px;
padding-top: 10px;
position: absolute;
text-align: center;
width: 100%;
}
On multiple pages I have containers that content text. On some pages there is just enough content that the footer appears at the end of the page. But in some cases there isn't enough content so the footer still shows under the container but there is a gap between that and the end of the page. How can I fix this so it adjusts regardless of the length of the container?
like so
<!DOCTYPE html>
<html>
<head>
<title>My Amazing Footer</title>
<style>
html, body {
margin:0;
padding:0;
height:100%;
}
.wrapper {
min-height:100%;
position:relative;
}
footer{
background:#F1F1F1;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height:300px;
}
footer p{
text-align: center;
padding-top:100px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="Content">
<p>HTML Ipsum Presents</p>
</div>
<footer>
<p>© My Website 2013. All Rights Reserved!</p>
</footer>
</div>
</body>
</html>
see we have the footer in the wrapper and the footer is absolute to the bottom and left of the wrapper then we just add the height of the footer to the wrapper bottom padding and some default height on the wrapper and body and that's sorted, take a look on jsfiddle here - http://jsfiddle.net/eTwJh/2/ and here is one with no content - http://jsfiddle.net/eTwJh/3/
Without seeing the corresponding HTML, it's a bit hard to guess what your issues might be. It sounds like there's a bottom margin on your main content that's pushing the page bottom downward past the footer when there's only limited content inside that main section.
To fix it, either adjust that margin or else change the positioning of the footer. At the moment, the position is absolute, which means that the footer is positioned based upon the its parent element in the HTML. Switching the positioning to relative will make it appear just after whatever element comes just before it in the HTML.
I suggest you read more about CSS positioning before trying to work on the issue further.
Please, consider the following jsFiddle - http://jsfiddle.net/mark69_fnd/hwCuB/ (you can find the code after the body of the question).
It represents a trivial example of the classic header, content, footer HTML layout. Notice that:
The content never overlaps with the footer. Resizing the window will finally create a vertical scrollbar rather than move the content over the footer.
There are no redundant scrollbars.
No absolute heights, except of the footer, which may be assumed to be no higher than 2em.
The content height is less than the available height between the header and the footer.
I would like to keep the first three properties, but change the last one, so that the content height is the full height between the header and the footer. And I would like to do so without resorting to javascript.
How can I do so, if at all?
EDIT
The given html and css are just an example. You are free to change them as long as the final result satisfies the conditions of my question.
EDIT2
Apparently, I am not very clear on what I want to achieve with the content. Here is what I have now:
Notice how the content does not extend the full height available to it between the header and the footer.
What I am after is this:
(edited in mspaint, I do not know to do it really)
EDIT3
Added an except clause to the 3rd condition:
except of the footer, which may be assumed to be no higher than 2em.
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.7.3/build/cssreset/reset-min.css">
</head>
<body>
<div class="container">
<div class="header">
Header goes here.
</div>
<div class="content">
<div class="innerWrapper">
Content goes here.
</div>
</div>
<div class="footer">
<div class="status">
Footer goes here.
<div>
</div>
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
width: 100%;
}
.container {
position: relative; /* needed for footer positioning*/
margin: 0 auto;
height: auto;
min-height: 100%;
background-color: #ddd;
}
.content {
padding: 0em 0em 2em; /* bottom padding for footer */
background-color: #bbb;
}
.footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */
}
.status, .header {
background-color: #999;
border: solid 1px #000000;
}
There might be couple ways to do this, but the only ways i can think of at the moment all involve setting/knowing the height of your header and footer.
Here is one using display:table http://jsfiddle.net/fLnkf/
There may be other solutions depending on if your requirements allow you to change your html or use CSS3.
hope this helps!