I am trying to create a full page static footer in twitter bootstrap like in This website or in This website. The footer in both website are almost 400px to 500px, and I want the same footer but static not fixed, the one I create is showing fixed I don't know where I mess-up the code. This is the jsfiddle Link of what I try and below is my code...
Footer html code
<div class="footer affix clearfix">
gfh
</div>
Footer css
.footer
{
bottom: 0;
height: 400px;
left: 0;
right: 0;
width: 100%;
background: #222222;
}
You will need to update your HTML and CSS to:
<div class="footer">gfh</div>
.footer {
height: 400px;
width: 100%;
background: #222222;
}
Here's a Fiddle: http://jsfiddle.net/m0nk3y/yp5ff0wc/1/
You do not need "affix" unless you want it to be fixed position. Also, clearfix is not necessary unless you plan to float elements inside the <div>. There's no need for bottom, left, or right positioning since you plan to use the default position (which is 'static' by default).
I hope that helps. Good luck!
Related
I have a page like http://codepen.io/meek/pen/NNprYb
My problem is that the footer is not staying at the bottom of the page, only at the bottom of the first section.
HTML for footer:
<footer class="row-footer">
<div class="container">
<div class="row">
text
</div>
</div>
</footer>
and CSS:
footer {
width: 100%;
bottom: 0;
position: absolute;
height: 50px;
background-color: #ccc;
}
No matter what I try I can't get it to stay at the bottom. I'd like for it to be at the very end of the contact section.
clarification: I don't want it to be fixed, I just want it to be at the very bottom of the page.
Remove the height:100% from #content
Remove position:absolute from footer
Setting the height to 100% will only make it as tall as the windows/screen height. Removing it will make it "auto-expand".
Codepen Link
footer {
width: 100%;
bottom: 0;
position: fixed;
left: 0;
height: 50px;
background-color: #ccc;
}
OR
just do the following
Wrap the entire html inside a div lets call it wrapper
then
footer{
position: fixed;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
height: 50px;
background-color: #ccc;
}
This piece of code just calculates the top value of your footer div
Ok, using position: absolute; on footers is generally never a good idea since the footer no longer will move relative to the rest of the content on the site. I understand that you do not want to use position: fixed; since this will not give you the results you are looking for.
Your #content div currently has a constant height of 100% which will push the footer to somewhere in the middle of the content.
My solution would be to use a min-height: 100%; on the #content div and remove the position: absolute; (and bottom: 0;) from the footer.
Result: The content-divs' height will adapt to be more than 100% if more content is added. It will always be at least 100% and therefore the footer will always be pushed to the bottom of the page, even if the content only fills half the window size.
This seems to be the most perplexing issue of all time, at least for me. Knowing that this page, aside from the header is broken - I have copied the HTML and tried to carefully remove the WordPress related jazz so you get the html of the page.
JsBin Live Page
What I want you to focus on is the footer sitting in the middle of the page. I remove position:absolute and it sort of moves down.... It needs to stay at the bottom of the page.
This is position:fixed this is the only way it stay at the bottom, but see how the footer follows you? I don't want that.
You might say, do min-height: 100% That is not what I want either because then the container, row and column classes that have height of 100% do not work.
What I am trying to accomplish is: this type of layout. But as you can see the footer rides up...
Yes I have tried position:relative as well: check out position:Relative
So as you can see The Live page I linked you too, from everythin gI read on the internet is the right way to achieve this type of layout., How ever I must be doing something wrong ...
Update 1
Before you suggest I am missing divs, I have validated through a div checker for all of MY example and the divs are correct. I am not missing any divs. This is a pure css issue
Before you mark this a duplicate of x, y and z - I have provided three examples of the positions I have tried and none of them has worked:
position:absolute
position:relative
position:fixed - Not what I want. The footer MUST stay at the bottom of the page.
Finally, as stated min-height: 100% on the wrapper (or any other element) is not acceptable as an answer unless you can specify how I can achieve this type of layout.
The way i usually do this, is to add position: relative to html and position: absolute to the footer itself.
The main disadvantage that you have to set margin-bottom=footer-height for the body
<!doctype html>
<html>
<head>
<style>
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 100px; // is equal to footer height
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="footer">footer</div>
</body>
</html>
See the result https://jsfiddle.net/jy0gsgm4/
Removing height:100% from wrapper stops the spacing below the footer.
This is happening because the total height is the 100% wrapper and the height of the navbar. I would suggest putting the navbar into the wrapper div.
I'm a fan of this method.
display: inline-block;
Pretty self explanatory. HTML (Demo)
<div class="verycoolwrapper">
<!-- tons of cool stuff on page -->
<footer id="footerstay">Blah | Blah2 | Hey | Click Here | Copyright 2090</footer>
</div><!-- // end wrapper -->
CSS: (Demo)
.verycoolwrapper {
width: 960px;
background: pink;
margin: 0 auto;
position: relative; // child elements relative to this, no height needed
}
#footerstay {
// your styles
width: 100%;
height: 150px;
background: #ccc;
display: inline-block;
}
Also, alternately; clear float should work for you.
I have this site:
http://dl.dg-site.com/functionmentes/
There is a div with color #D9D9D9
Code CSS:
#full_bar{background:#D9D9D9;width:100%;height:100px;}
I want to my div to be the full width site and to be glued to footer.
How can i make this?
I use a theme in Wordpress.
Thanks in advance!
By making the position fixed, this will ensure that it will follow the user as they scroll up and down your website.
#full_bar {
background: #d9d9d9;
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
left: 0;
}
If you add position:absolute; left: 0; to the css, the bar will more or less do what you're trying to do, but it's a dirty hack.
The real problem is that you're adding your 'full_bar' in the wrong place (inside a div which restricts the width). Personally I would opt for placing the full-bar in your <footer> tag.
You should placed your gray bar outside the section, between section and footer or on footer on html.
But if you want a css solution, you need to put your section parent to position relative and set your gray bar on absolute bottom with full width:
section {
position: relative;
padding-bottom: 100px; // Your bar height
}
#full_bar{
background:#D9D9D9;
width:100%;
height:100px;
position: absolute;
bottom: 0;
left: 0;
}
You are putting #full_bar inside class="container". container is the parent of div id #full_bar, that's why its not taking full width.
Do your code outside contaner class and you can see the changes.
See the attachment, i think you want this as per i understand your question.
I'm trying to get a footer to flush to the bottom of the page, but not necessarily be sticky - just be at the bottom in case the user scrolls down there.
This "works" but there seems to be a bit of white space at the bottom after the footer appears which looks a little awkward. Does anyone know the best way with CSS to flush a footer to the bottom and keep it at the very bottom without making it sticky?
Let me know if you want me to post my html/css.
There are a number of good examples on the web of this.
Here is a supposedly updated version: http://mystrd.at/modern-clean-css-sticky-footer/ ; I have no experience with this one.
And this is the classic version that has been around for a long time and well used by many:
http://www.cssstickyfooter.com/html-code.html (waybackmachine archived)
Here's my own slightly edited version of the second link that I've had good luck with.
/* Sticky Footer Stuff
*/
html,body { height: 100%; }
#sticky-wrap { min-height: 100%; }
.footer {
height: 160px;
margin-top: -160px;
}
/* end sticky footer stuff
*/
<div class="wrapper" id="sticky-wrap">
<div class="content-area”>
</div>
</div>
<footer>
</footer>
I've had a similar issue.
I always wanted my footer to be at the bottom of the page, but never overlap the other div's.
The best solution I came up with was :
CSS
#footer {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
#media screen and (max-height: 700px) {
#footer {
position: relative;
}
}
HTML
<div id="footer"></div>
This will keep the footer always on the bottom of min-height 701px, and below that it will be at the bottom relative to other divs. Of course you can change the parameters and set it to your own pixel measurements.
Hope this helps.
In my HTML page, I have made a container that contains the entire body (header and footer included). But the problem I am facing is that when I set the container to a fixed width, the header and the left side of the footer display properly, but the right side of the footer extends on indefinitely. Here is my CSS:
.container
{
width: 1024px;
}
.footer
{
float: left;
margin: 0px;
width:100%;
background: #0B3B17;
height: 100px;
position: absolute;
bottom: 0;
}
I think it may have something to do with the absolute positioning, but I need my footer to be absolutely positioned since it keeps moving out of place. What would you suggest? I am using Twitter Bootstrap for development by the way. Thanks for your help.
Add position:relative; to .container rule.
.container {
width: 1024px;
position: relative;
}
Because of the footer is relatively body position.. So will be in the body of the same width.
I think sticky-footer will be you a better solution.