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";
}
Related
I want to adjust the position of the footer based on the content on the page. If I have very little content on the page, then I need the footer to be displayed after the content, and if I have more content on the page, I want to display the footer at the bottom of window.
I have made a demo: here https://stackblitz.com/edit/angular-59tthr?file=app%2Fapp.component.ts
When the page has more content, the footer sticks to the bottom of page which is good but if I toggle the content it is still in same position.
Is it possible to set the footer exactly after the content?
This could help
I check this in your demo it's work fine.
.MainWrapper {
position: relative;
padding-bottom: 20px; /* this will be the height of your footer */
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
If your footer height is bigger then try to add padding-bottom value using js.
As mentioned in the title, here are the requirements:
a footer that must always be at the bottom of the viewport (no pushdown)
css only
height based on the content of the footer (variable)
somehow prevent overlap of the main content element - when scrolled down
no tables
header
content
footer
if you remove any of the requirements, I know how to do it, but not with all requirement intact.
does anyone know a solution?
To put the footer on the bottom you can use a variation of the following:
.some-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%
}
The problem with this is that the main content will be behind the footer and you won't be able to scroll it up. And you can't just put a padding-bottom on the content because you don't know the footer's height.
I would recommend putting a duplicate of the footer after the content, but this one with position: relative, and with opacity: 0. This way you can always scroll until all the content is visible, independently of the footer's height.
This should work as you want! :) It will always be at the bottom of the page.
This will always be at the bottom of the viewport, NO MATTER WHAT! :D
#footer{
height: auto;
min-height: 100px;
width: 100%;
background-color: blue;
bottom: 0px;
position: fixed;
display: block;
z-index: 100000;
}
<div id="footer">
</div>
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%.
I have found a lot of similar questions on SOF but unfortunately they all relate to : how to make a sticky footer. I'm not trying to make my footer appear at the bottom of the page at any time (I mean : no matter where the user is in the page).
Actually what I'm trying to achieve is very simple but I couldn't find a solution. I have many pages that do not have a lot of text, so currently the footer is something like one line after the end of the text and there is a big blank at the bottom of the page. I would like that the footer be at the bottom of the page if there is only a few text of the page.
I have to put this on my footer class :
height : 100%
and then this
margin-top: 100%
And some other stuff, but it didn't make it.
Thank you !
You can use min-height property in style-sheet for a particular div in which you have place content, just before footer.
<div class="textclass">
<p>
Text or content
..........
</p>
</div>
<footer>
............
</footer>
CSS:
.text-class{
min-height:700px; /*adjust height at your end */
}
If you want your footer to always be at the bottom of the page, then you will have to specify a value for height for the 'content' section of your page. This will force your footer to always be at the bottom. Try something like this:
height: 800px
for the div that represents your content.
OR
Use Absolute positioning
Apply this to your footer.
.footer {
position:absolute;
bottom: 0px;
}
You can see this here: http://jsfiddle.net/892JK/
Just observe that its the above two properties namely position: absolute and bottom:0px that make it always 'stick' to the bottom of the page.
This is quite similar to 'sticky' header concept where the concept is, errm, looked at the opposite way i.e. the properties would be modified as these for sticky header
.stickyHeader {
position:fixed;
top: 0px;
}
Hope this helps!!!
I have used this method: http://ryanfait.com/sticky-footer/
* {
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/
*/
You will have to specify a fixed height of the main div containing the body elements and then specify the footer.it will always show after the specified height.
Having big problems getting the footer to stay at the bottom of the page.
I've decided to add the code to pastebin:
This is the css: http://pastebin.com/uf2c7jLX
This is one of the pages: http://pastebin.com/qpwz22us
The problem is consistant throught the site. What am I doing wrong?
For example, sometimes this happens, some content is hidden by the footer:
There is a huge gap between the bottom of the browser view and footer. The image above also shows that the footer is overlaping the content.
About the edit: The second is not what I want either. There is a huge gap between the footer and the bottom of the browser. I want the footer to be at the bottom and if the content is so long that you have to scroll then the footer should not be visible until you reach the bottom of the page. Thank you :)
edit: actually I just saw your screenshots, just change the absolute positioning to relative
Change the positioning of the footer and body and remove margin from the footer:
body{
margin: 0;
padding: 0;
/*padding-bottom: 60px;*/
width: 100%;
height: 100%;
position: relative;
}
footer{
position: relative;
background: cornflowerblue;
height: 60px;
width: 100%;
}
here is the fidle http://jsfiddle.net/vFg8j/
another useful resource - sticky footer http://ryanfait.com/sticky-footer/