I am working on a small personal project to try and relearn HTML & CSS and I am having some issues with pinning the footer of my site to the bottom of the page.The site can be found here.
I have tried searching online and found that my footer CSS should have the following:
bottom: 0;
position: fixed;
This does pin it to the bottom but it exceeds the width of my container and doesn't look right. Can anyone help?
Thanks.
You have to understand how position: fixed; is working. It ignores any surrounding element. ie. A fixed position element is positioned relative to the view-port, or the browser window itself.
Your .container styles are:
margin: auto;
width: 75%;
So apply this also to the footer:
footer {
bottom: 0;
margin: auto;
width: 75%;
position: fixed;
height: 300px;
background: #2D2D2D;
border-top: 12px solid #3E3E3E;
}
you can try to play around with the width of the footer to see what fits. e.g.
width: 100%;
bottom: 0;
position: fixed;
try this:
body {
line-height: 1;
height: 100%;
display: table;
width: 100%;
}
footer {
display: table-row;
height: 1px;
width: 100%;
}
footer:before, footer:after {
content: " ";
display: table;
}
footer:after {
clear: both;
}
Related
First of all, please read this whole question so you can fully understand what i am looking for, Thanks!
This is a question i have been trying to research for a great time now, and has stumped me for quit a while. Can i have a true sticky footer with a fixed header?
How can i implement a sticky footer with a fixed header? I can't add padding or a margin to the body or content, since that will break the footer. Also, i want to be able to use width:100% and height: 100% inside my content without it overflowing and creating a mess.
Here is what i am aiming for (Please excuse my great Photoshop skills) :
This look good, when i use position:fixed; and bottom:0; on my footer. But to make it truly sticky, i need to add some css to my page. (from : http://css-tricks.com/snippets/css/sticky-footer/)
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 142px;
}
.site-footer {
background: orange;
}
This allows me to have a GREAT looking sticky footer, but here is the problem. Some of the content is underneath my fixed navigation bar.
I can't add padding or a margin to the body, html, OR the content, because that will make the sticky footer mess up. Is there any way i can do this without CSS "Hacks"?
This is with the content under the header: http://jsfiddle.net/g2ydV/3/
Looks good right!, but some of the content is hidden under the header? Lets fix that by adding a margin to the content: http://jsfiddle.net/g2ydV/2/
The above example works, BUT the footer is messed up. How can i achieve this effect without messing up my sticky footer?
One potential solution is to swap your content:after to content:before.
Working Demo
CSS:
/* .content:after {
content: "";
display: block;
} */
.content:before {
content: "";
display: block;
height: 45px;
}
There's an alternative way of doing this using display: table; and display: table-cell which seems to be becoming increasingly popular.
I'm just offering it up as an alternative worth having a look at. It's quite clean and doesn't require any defined heights for the header and footer which is nice.
HTML
<div id="wrap">
<div id="wrap-inner">
<div class="navbar">
<span>Fixed Header (content under here)</span>
</div>
<div class="content">
<p>Content Here ... part of this is under the header, i need to see all of it without messing up the sticky footer</p>
</div>
<div class="footer">
<span>Sticky footer!</span>
</div>
</div>
</div>
CSS
html, body {
height: 100%;
}
body {
margin: 0;
}
#wrap {
display: table;
width: 100%;
height: 100%;
min-height: 100%;
}
#wrap-inner {
vertical-align: middle; /* optional for positioning content in the middle */
display: table-cell;
}
.navbar, .footer {
position: fixed;
width: 100%;
}
.navbar {
top: 0;
width: 100%;
}
.footer {
bottom: 0;
}
Demo
it's my decision for fixed header
html {
position: relative;
min-height: 100%;
}
#main-container {
padding-top: 55px; /* this is header height */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
}
body {
margin: 0;
padding:0;
line-height: normal;
height: 100%;
overflow: hidden;
}
.header {
background:#3d5084;
padding: 16px 0 16px 30px;
display: flex;
align-items: center;
justify-content: center;
}
.main-middle-container {
padding: 30px;
display: flex;
align-items: center;
justify-content: flex-start;
height: calc(100vh - 150px);
flex-direction: column;
overflow: hidden;
overflow-y: auto;
background: #f1f1f1;
}
.footer {
background: #3d5084;
padding: 11px 25px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
position: relative;
z-index: 1;
}
Demo link
Ok i have problem to force footer on bottom when not enough content to push it there naturally.
I partially solved problem. It is rly simple design, i have header, content and footer, all inside div wrapper.
html,
body {
margin:0;
padding:0;
height:100%;
font: sans-serif;
}
#wrapper {
min-height:100%;
position:relative;
}
#content {
padding: 2% 5%;
max-width: 940px;
margin: 0 auto;
padding-bottom:80px; /* Height of the footer element */
clear: both;
background-color: yellow;
}
footer {
background:#ffab62;
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
font-size: 0.75em;
text-align: center;
padding-top: 30px;
clear: both;
color: #ccc;
}
I have used background color to see position of elements on page. So when there is not enough content footer is on bottom and it is OK. When there is more than enough content footer is overlapping some of it, it gets fixed when i put position on footer relative instead of absolute but then on pages where there is not enough content footer is not on bottom.. Fixing one other is not good and fixing that other first page is not good.. Is there any solution that can help me solve this...
Adjust your min-height: to the minimum value where you want your footer to end up, 100% will put it right below your content (which should be the default anyway without even declaring) which you said isn't long enough; make a minimum-height: 900px; or similar to where you want the minimum end point to be where the footer will live.
If the footer is in the correct place in the HTML but it is floating up. Then consider the below.
display:inline-block;
add to footer.
footer {
display: inline-block;
}
If these don't work, show your HTML!
You nearly did it :)
Your content div is overlaping the sticky footer because of its height. Just use a height: calc(100% - footer_height); and start your content where your header finishes.
This is a JSFiddle example of this usage.
CSS file
html,
body {
margin: 0;
height: 100%;
}
.container {
min-height: 100%;
position: relative;
}
.header {
background: #d6d6d6;
position: absolute;
height: 80px;
width: 100%;
top: 0;
left: 0
}
.content {
position: absolute;
top: 80px;
left: 0;
width: 100%;
height: calc(100% - 80px);
background: yellow;
}
.footer {
background: #d6d6d6;
position: absolute;
height: 80px;
bottom: 0;
left: 0;
width: 100%;
clear: both;
}
I hope it is useful.
I have read all the tutorials on how to make the footer at the bottom of the webpage but still i'm unable to do it for my site.
The links i have referred are
How do you get the footer to stay at the bottom of a Web page?
Making my footer stick to bottom of the page
Ways to stick footer to the bottom a page
making the footer stick the bottom
None of it worked..!
CSS
#footer1 {
clear: both;
background-color: #333;
width: 1200px;
min-width: 100%;
width: 100%;
bottom: 0;
position: relative;
height: 50px;
border-top:5px solid #1b9bff;
}
Here is the dummy fiddle of my site
Fiddle
This is the fiddle i have tried but there is a bug in it too
http://jsfiddle.net/andresilich/fVpp2/1/
Try this:
<div id="container">
<div id="content"></div>
</div>
<div id="footer">My Sticky Footer</div>
CSS:
html, body, #container { height: 100%; }
body > #container { height: auto; min-height: 100%; }
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content { padding-bottom: 3em; }
Add/Edit as following
#body {
margin-bottom: 85px;
position: relative;
}
#footer1 {
position: fixed;
}
I guess this is what you want
* html #form1 {
height:100%;
}
#form1 {
min-height: 100%;
position: relative;
}
#body {
padding-bottom: 50px; /* padding-bottom should be equal to the footer height (this keeps the footer from overlapping the content) */
}
#footer1 {
position: absolute;
width: 100%;
clear: both;
bottom: 0;
padding: 0;
margin: 0;
}
Following the code of this method - you need to to:
1) Place your footer outside the form
2) Add height: 100% on form
3) Set negative bottom margin to form according to the height of the footer.
form {
min-height: 100%;
height: 100%;
margin: 0 auto -150px; /*footer 150px high */
}
Modified Fiddle
I want to center a button in the bottom of the page:
<footer>
<div class="centerContent">
<input name="submit" type="submit" />
</div>
</footer>
Css:
.centerContent {
text-align: center;
}
footer {
clear: both;
height: 100px;
position: absolute;
bottom: 0;
}
If I remove the "footer" part of the Css, the button is not in the bottom of the page of course, but at least it is in the horizontal center of the page. If I leave the "footer" part in the Css, the button is in the bottom of the page but.....it is not horizontally centered anymore!!! Anybody knows why? Thanks a lot.
For horizontal align, you should stretch footer to full width. Add width:100% to footer style.
.centerContent {
text-align: center;
}
footer {
clear: both;
height: 100px;
position: absolute;
bottom: 0;
width: 100%;
}
footer {
bottom: 0;
clear: both;
height: 100px;
position: absolute;
text-align: center;
width: 100%;
}
Try add width:100% to the footer
footer {
width: 100%;
clear: both;
height: 100px;
position: absolute;
bottom: 0;
}
position: absolute will make the footer lose it's width by default.
Add left and right properties to your footer, both set to 0:
footer {
clear: both;
height: 100px;
position: absolute;
bottom: 0;
/* add the following lines */
left: 0;
right: 0;
}
If you add width: 100% instead (as other answers suggest), your footer might spread the page out because of any additional margins and/or paddings.
My CSS CODE
footer {
background-color: #242424;
bottom: 0;
clear: both;
color: #727272;
height: 210px;
left: 0;
line-height: 20px;
position: absolute;
width: 100%;
z-index: 1;
}
My HTML CODE
<footer></footer>
This is my site
You can see the footer bar on the middle.why is that i used correct CSS for that ??? any help would be appreciated ?
Use position: relative to show footer under main body content or position: fixed to stick it at the bottom of your page.
Use position: relative instead position: absolute;
I see u used min-height: 2000px; .Please used it as the your content go through that point
body {
background-color: #FFFFFF;
font-size: 14px;
margin: 0 auto;
min-height: 2000px;
width: 980px;
}
Remove
min-height: 2000px;
from body