My problem is that I have a web page with a footer. I would like the page to extend the footer to the bottom of the browser window if there is not enough content to fill the entire page. I would also like the footer to go to the very bottom of the page when the content exceeds the height of the browser and there is a vertical scroll bar.
For some reason I cannot get this to work, I followed the tutorial on this page: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
and the tutorial specifically says it does what I want-
"On long pages with lots of content the footer is pushed off the visible page to the very bottom. Just like a normal website, it will come into view when you scroll all the way down. This means that the footer isn’t always taking up precious reading space."
When I follow the tutorial it successfully puts the footer on the bottom of the page when there is not enough content to fill the page, but when there is more than enough content the footer is prematurely placed where the browser window initially ends because the body's and the everything container's heights are set to the height of the window as opposed to the height of the entire page (height of page with with scrolling).
the div organization is as follows:
<div class="everything">
<div class="main_content"></div>
<div class="template_footer"></div>
</div>
My CSS code:
html, body {
margin:0;
padding:0;
height:100%;
}
.everything{ //main container
width:100%;
min-width:960px;
max-width:1450px;
margin-left:auto;
margin-right:auto;
min-height:100%;
position:relative;
}
.main_content{ //body container
width:100%;
position:relative;
float:left;
}
.template_footer{
width:100%;
height:44px;
background-color:rgba(0, 0, 0, .5);
position:absolute;
bottom:0;
}
I've also tried a bunch of different variations with height and nothing works correctly, I've searched through other questions and they don't seem to answer this problem specifically.
The footer is absolute positioned to the bottom of the .everything container.
So no matter the content, the footer will be covering the bottom 44 pixels of your container.
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
.main {
padding-bottom: 60px;
}
.footer {
position: absolute;
text-align: center;
bottom: 0;
width: 100%;
height: 60px;
}
the main section padding-bottom should be bigger than the height of the footer. The footer section has to be position absolute. The whole page should be min-height 100%.
Related
How can I keep an element at the bottom of the page?
Applying bottom: 0; is likely a solution, but how do you actually keep it at the bottom?
Example: http://giphy.com/gifs/80s-guitar-mask-ToMjGpu0xa3M2nHDKWA
In this example, the footer div remains at the bottom of the page despite any browser size.
This does not keep it at the bottom of the page, it keeps it at the bottom of the browser window: http://jsfiddle.net/8o0xLug9/
The Real Reason http://giphy.com/gifs/80s-guitar-mask-ToMjGpu0xa3M2nHDKWA is having footer at the bottom of the page is the height of content.
so if you have a page with very less content ,Adding a minimum content height can help(as follows)
<section>
main content Area
</section>
use a minimum height like so
section{
min-height:800px;
}
Footer will automatically come down to bottom of screen(as the length of page is big).
If you inspect the element you can see that it is absolute positioned:
#footer {
-webkit-transition: .5s ease-in-out;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
min-width: 967px;
height: 60px;
background-color: #212121;
margin: 0 0 0 0;
}
To keep it the footer at the bottom give it position:absolute; bottom:0;
In your case remove min-height:100%; from the html tag to make the footer stick to the bottom of the page and not create more padding at the bottom so to avoid to scroll the page to see the footer.
Adding body { position: relative; } will add the footer to the bottom of the page.
I have had a lot of trouble with my footer and my page content, and am trying to find the correct way to do this. I have my footer at the bottom of the page, but when I add content it overflows the container, please help me.
CSS:
#container {
width: 75%;
height:100%;
margin:0 auto;
background-color:black;
margin-top:10px;
margin-bottom:10px;
padding:10px;
opacity:0.8;
#content {
width:100%;
}
footer {
text-align: center;
clear: both;
color: #B05510;
width: 75%;
height: 115px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
<body>
<div id='container'>
<?php
include 'navfoot/navbar.php'
?>
<div id='content'>
<div id='paragraph'>
<p>Eventually our website will be advanced enough for us to have a news feed! But until then we suck!</p>
</div>
</div>
<?php
include 'navfoot/footer.php'
?>
</div>
It depends on how you want the footer to act (fixed at bottom always, or relative to the content). But from what it sounds like, try adding this to your footer CSS:
footer {
background-color: black;
position: fixed;
}
That will keep it fixed and at the bottom of the page (in Chrome, at least). Otherwise, make the position: relative of the footer and that will sink it to the bottom of the content.
Your container and footer are set to 75% width and your content is set to 100% width. That could be why it's going past the container/footer. It depends on the order. The absolute positioning on the footer could be causing it. You could try changing to relative.
Please post a mock-up of what you are trying to achieve and the HTML to what you have now.
If you are using PHP includes, we need to see what those are. Lots of variables that can cause content to break.
If the issue happens when you are resizing your browser, it's because the paragraph ID (#paragraph) has a fixed width of 500px and everything else is percentages.
Fixed on the footer will not resolve the text flowing on top of it.
I have been playing around with my content in order to achieve my desired effect however now my footer will not be at the bottom of the page below all content. I it is currently fixed at the bottom of the page, however this overlaps a navigation bar running down the left hand side. I have the main body of the content inside a div - main container, with the footer outside of this.
HTML for my footer:
<div class="footer">
<div class="footerContent">
<p>Copyright © 2014 www.danielparry8.com</p>
</div>
</div>
CSS for footer:
.footer {
width: 100%;
z-index:999;
bottom:0;
clear:both;
position:fixed;
}
.footerContent {
font-family: sans-serif;
color: #FFF;
float:left;
width:100%;
margin-top: 10px;
margin-bottom: 10px;
}
.footer p {
float:left; width:100%; text-align:center;
}
I understand that fixed positioning is probably not the method to use, however when I use other methods it rises towards the top of the page, and still overlaps my content.
All content is inside a main content div with the following CSS
html, body, #maincontainer { height: 100%; }
body > maincontainer { height: auto; min-height: 100%; }
This has been getting on my nerves for days and no other solutions I have browsed on here have worked, I presume their is an error in my code somewhere I just can't find it!
Thanks!
you need to change position: fixed to absolute end add bottom: 0;
footer and your unit must be located outside of the wrapper
I used a margin-bottom: <footerheight> on the body css. Might be a bit 'cheaty' but seems to work on everything I tried.
i am working on struts2 application.when i am dealing with jsp pages one problem is occurred, when page contents are less footer float below the contents, this will look very bad.but when contents are more than page then it automatically float to the bottom.this is ok for me. Any help will be appreciated...
the code used for footer in css is...
#footer {
height:41px;
background:url(../images/main-bg.png) repeat-x;
width: 100%;
}
For a sticky footer (always on the bottom of the page, no matter the height of the page), use position: fixed;
#footer {
height:41px;
background:url(../images/main-bg.png) repeat-x;
position: fixed;
bottom: 0;
width: 100%;
}
If you are looking for making the footer to be always visible on the browser window that doesn't get affected by scrolling then position:fixed will do. However that will look bad when the content is more and you need scrolling and still the footer stays in the viewing area overlapping the content. A clean solution is to move the footer markup outside the wrapper div. Something like should be good:
SAMPLE DEMO
CSS-
html, body {
height: 100%;
}
#wrapper {
background-color:yellow;
height: 90%; //sharing the height between wrapper and footer
margin:0px;
}
#footer {
background-color:green;
height: 10%;
min-height:20px;
max-height:40px;
}
On my website: http://www.thetechnodaily.com the footer on homepage is fine because of a lot of content. But on pages with small content such as about page its not at bottom of page. The footer is at the end of content rather than bottom of page. Is there any way I can make the footer always stay at bottom?
yea you can use sticky footer
<div id="footer"></div>
#footer
{
position: relative;
margin-top: -50px; /* Give the height of footer as negative margin */
height: 50px;
clear:both;
}
This link may help you
http://www.cssstickyfooter.com/using-sticky-footer-code.html
If you are referring to having a fixed footer which always shows at the bottom you will need to use fixed position bottom: 0px so it will always stay there even if the content does not fill up the screen
#footer_id {
position:fixed;
bottom:0px;
height: "whatever";
}