I am using a sticky footer like described in:
How do you get the footer to stay at the bottom of a Web page?
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
I have a paragraph with a link that I want to be at the bottom of the page, so I put it in .footer.
The problem is that the link is not clickable in Firefox 3.5.2 and Chrome, it is behind .push. It does work in IE7 and IE8 but I guess that doesn´t say much.
I have toyed around with z-indexes but that does not work. By the way, I need the position:relative in #page to position some stuff inside that div.
Is there a way to make a link in .footer clickable in all browsers?
The relevant parts of the code:
css
html, body {
height: 100%;
}
#page {
width: 962px;
text-align: left;
min-height: 100%;
/* sticky footer part */
height: auto !important;
height: 100%;
margin: 0 auto -90px;
/* end sticky footer */
position: relative;
}
/* sticky footer part */
.push, .footer {
height: 90px;
}
.push {
}
.footer {
background: #181f18 url(../images/background-top.png) no-repeat center bottom;
}
html
<div id="page">
<div id="wrapper">
<div id="contents">bla bla</div>
</div>
<div id="footer">bla bla</div>
<div class="push"></div>
</div>
<div class="footer">
<p>Some Text</p>
</div>
Solved it, adding a postion:relative and z-indexes did it:
.push, .footer {
height: 90px;
position: relative;
}
.push {
z-index: 9000;
position: relative;
}
.footer {
background: #181f18 url(../images/background-top.png) no-repeat center bottom;
z-index: 9999;
position: relative;
}
I had similar problem in webkit browsers. Setting the z-index or position didn't solve the problem but after I set -webkit-transform:translate(0,0); the button is clickable again.
Correct me if I'm wrong but I think you should add a negative value for z-index which pushes it back enabling the link button.
This worked for me
.footer, .push {
height: 4em;
position: relative;
width: 90%;
margin: 0 auto;
z-index: -9000;
}
Related
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 8 years ago.
I've read a lot of articles and existing questions on stackoverflow. I've litteraly tried over 10 different pieces of code. It just doesn't work.
I've got a website, and I would like the footer to stick on the bottom no matter what. I mean, litteraly stick on the bottom. I do not want it to move with the height of the window of the browser. I want it to stay below all existing divs.
At the moment the footer is at the bottom of the page. But it moves with the height of the window of my browser. So, if I minimize my browser, the footer will move upwards with the height of the browser. I do not want that.
I've tried a lot, but it doesn't work. This is my current code:
body{
background-image: url('../images/bg.png');
background-repeat: repeat;
margin: 0px;
padding: 0px;
}
body, html{
height: 100%;
}
#body{
width: 1024px;
min-height: 100%;
margin: 0 auto;
}
#footer{
clear:both;
min-height: 150px;
width: 100%;
background-image: url('../images/footerbg.png');
background-repeat: repeat;
}
The body ID is the wrapper. The footer is outside the body wrapper
<body>
<div id="body">
<!-- HEADER -->
<div id="logo"></div>
<div id="menu">
<ul id="hmenu">
<!-- stuff -->
</ul>
</div>
<div id="page">
<!-- stuff -->
</div>
</div>
<div id="footer">
<!-- stuff -->
</div>
<div id="navigationbar"></div>
</body>
Edit:
The problem has to do with one of the divs inside the "body" div. It is being positioned using an absolute position. Is there any way to get the footer stickied properly using Ryan Fait's method, whilst using an absolute position?
Edit #2: I forgot to use "clear:both". Solved it
Ryan fait has a solution to this: http://ryanfait.com/sticky-footer/
I modified it slightly using SASS:
$footer-height: 250px; /* Set size of sticky footer in the variable: */
.main-wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto (-$footer-height); /* the bottom margin is the negative value of the footer's height */
}
.push {
clear: both;
height: $footer-height;
}
.footer-wrapper {
clear: both;
min-height: $footer-height;
background: #E7E7E7;
padding: 50px 0;
}
You could take out the variable for use with vanilla CSS.
Your HTML would look something like this:
<div class="main-wrapper">
<div class="wrapper"></div>
<div class="push"></div>
</div>
<div class="footer-wrapper"></div>
I think you should use this css for footer:
#footer{
position:fixed;
bottom:0;
background-image: url('../images/footerbg.png');
background-repeat: repeat;
}
like here.
All you need:
#footer{
position: fixed;
bottom: 0;
/* rest of your styles */
}
Also if you don't want content to be hidden behind the footer:
#body { /* your main div has an id of body, not to be mistaken for body tag */
padding-bottom: 150px /* height of footer */
}
Demo http://jsfiddle.net/2mzak87o/
Fix the div to the browser, then force it to have a 0 margin on the bottom and left.
#footer{
position: fixed;
bottom: 0;
left: 0;
clear:both;
min-height: 150px;
width: 100%;
background-image: url('../images/footerbg.png');
background-repeat: repeat;
}
If you want the div in the middle of the bottom, create a container with width:100% and then have the footer contain "margin: 0 auto"
try this :
#body {
width: 1024px;
min-height: 80%;
margin: 0 auto;
position: relative;
}
#footer {
clear: both;
min-height: 20%;
width: 100%;
background-image: url('../images/footerbg.png');
background-repeat: repeat;
}
I have a navigation bar under a header div tag
and a slideshow div afterwards ... as the code shows
<div class="header">
<div id="navbar">
content
</div>
</div>
<div class="container">
<div class="slideshow" id="slideshow">
slideshow content
</div>
</div>
the header and navbar have a fixed position to stay on top of the page when scrolling , the problem is when I scroll my "slideshow" appears on top of the navbar but the rest of the page content does not, how can I fix this ?
CSS styles
.slideshow {
position: relative;
margin-bottom: 10px;
padding: 50px 0 0 0 ;
}
Different CSS sheet for header and navbar
.header {
background: #2f3036;
height: 51px;
position:fixed;
width: 100%;
}
#ime-nav {
position: fixed;
width: 100%;
z-index: 10000;
background:#FF9900;
}
apparently I just needed to add a z-index to the header, completely overlooked it
.header {
background: #2f3036;
height: 51px;
position:fixed;
width: 100%;
z-index: 1;
}
I would like to put footer on the bottom of the page (or bottom of the screen, if page is shorter than a screen). I am using code:
<div id="wrapper">
<div id="header-wrapper">
...
</div> <!--header-wrapper-->
<div class="clear"></div>
<div id="body-wrapper">
<div class="row960">
<div class="menu">...</div>
<div class="content">...</div>
</div> <!--row960-->
</div> <!--body-wrapper-->
<div class="clear"></div>
<div id="footer-wrapper" class="gray">
</div> <!--footer-wrapper-->
</div> <!--wrapper-->
and css:
.clear{
clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:24px;
margin:0px
}
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body{
background-color: #000000;
color: #FFFFFF;
font-size: 14px;
}
#wrapper{
min-height: 100%;
position: relative;
}
#header-wrapper{
height: 100px;
}
#body-wrapper{
padding-bottom: 50px;
}
#footer-wrapper{
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
.row960{
width: 960px;
margin: auto;
overflow: auto;
}
#menu{
width: 200px;
float: left;
}
.content{
width: 740px;
margin-left: 20px;
float: right;
}
The problem is that footer is on the bottom of the screen even if the page is longer than a screen (it covers a text). I've checked it with Firebug and body-wrapper has right height, but row960 has height of screen instead of height of page. I can't figure out how to fix it. Does any one have idea what to do?
You can see my page on http://www.domenblenkus.com/fiap/notice.php
Thanks for your help!
EDIT: I don't know if I emphasized it enough, so I would like to point it out that the main problem is that height of row960 is not right.
Hmmm, I think I have a solution that fits the requirements you stated. There are certainly other ways to do this though, so you can keep looking around if you don't agree with this method. (Also, when I looked on your site it appeared that your #wrappper element was a sibling of #footer-wrapper, and not a parent.)
So, the HTML would look like (structure copied from your site):
<div id="wrappper">
<div id="header-wrapper" class="gray">
<div class="clear"></div>
<div id="body-wrapper"></div>
<div class="clear"></div>
<div class="spacer"></div>
</div>
<div id="footer-wrapper" class="gray"></div>
Note the addition of the .spacer element at the bottom of #wrappper, it's required for this approach of the "sticky footer".
Now, CSS you'll need to add (add to any current definitions if you already have them):
body, html{
height: 100%;
}
#wrappper{
min-height: 100%;
margin-bottom: -50px;
height: auto;
}
.spacer{
height: 50px;
}
If you're wondering why I chose 50px for the height, it's because that's the height of your footer element, #footer-wrapper.
Anyways, I only really tested this in the Firebug console, so I'm not sure how it will behave in a live environment, but I'm fairly certain this will give you what you want. If this isn't what you were looking for, let me know and I'll be happy to help further!
If you want it at the bottom, then you don't need the position:absolute or bottom:0, it will be at the bottom of your div anyway.
You can try doing it using margin. Here is a fiddle of what I'm taking about: http://jsfiddle.net/8WLyP/
Basically for your HTML, place all your content inside a "container" element and then your footer will be a sibling of that element.
Then in your CSS what you will need is to give them html and body elements a min-height: 100%
You "container" element will also have min-height: 100%
You will then need to give your footer a heightof X, in my example it's 50 pixels.
The "container" element will need to have margin-bottom: -50px or whatever value you give the height of the footer.
With all that done, make sure you don't give "container" and "footer" any other margins or paddings than the ones shown, if you need to give them, then you will need to give it to the child elements, in my example p element.
With this technique, as opposed to position: fixed the footer will stick to the bottom of the window if the content is too short, and it will move with the content when the content is bigger than the window/viewport.
HTML:
<div id="container">
<header>
<p>Header</p>
</header>
<section>
<p>Section</p>
</section>
</div>
<footer>
<p>Footer</p>
</footer>
CSS:
html, body, header, footer, section, p, div {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
p {
padding: 5px 10px;
}
header {
width: 100%;
background: #f00;
color: #fff;
}
section {
width: 100%;
height: 200px;
background :#0f0;
color: #fff;
}
#container {
width: 100%;
min-height: 100%;
margin-bottom: -50px;
}
footer {
width: 100%;
background :#00f;
color: #fff;
height: 50px;
}
You want to place the footer at the bottom of the content. BUT: You want to have it at the bottom of the viewport (window) if the content above it is shorter.
So, try this:
the CSS:
#footer-wrapper {
position: relative;
width: 100%;
height: 50px;
}
#body-wrapper {
position: relative;
height: 100%;
}
… and the JavaScript (jQuery):
var bodyWrap = $('#body-wrapper'),
footerWrap = $('#footer-wrapper'),
windowHeight = $(window).height();
var heightRemaining = parseInt(windowHeight - bodyWrap.outherHeight() - footerWrap.outerHeight());
if (heightRemaining > 0) bodyWrap.css('min-height', heightRemaining);
Didn't test it due to little time.
Give it a try.
I am trying to do the following in a CSS template:
Dock the footer to the bottom when there is not enough content to
fill the page
Stretch the header and footer background across the whole width
Position all the content in the middle of the page
This is the code I have, created with help on here:
http://tinkerbin.com/lCNs7Upq
My question is, I have seen a few ways to achieve this. Is this the best? It seems a shame to have to have the empty div as well, is this a bodge?
You can fix and element to the footer using CSS:
position: fixed;
bottom: 0;
However, I'm trying to figure out what exactly your trying to do.
You header and footer should automatically go 100% across the page if it's a div.
Your middle section can be set to height: auto; via css and will fill up the viewport pushing the footer all the way to the bottom, but to do this you also have to set the body to 100% in order to get it to work.
html, body, #content {
height: 100%;
min-height: 100%;
}
#header {
height: 100px;
width: 100%;
background: blue;
position: fixed;
top: 0;
}
#content {
height: auto;
margin: 100px auto;
background: green;
}
#footer {
position: fixed;
bottom: 0;
height: 100px;
width: 100%;
background: red;
}
Your HTML should look somewhat like this:
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
Working Example: http://jsfiddle.net/s4rT3/1/
This is the best example I have seen:
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 {
height: 142px;
}
.site-footer {
background: orange;
}
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
Update: In 2019 using flex is a better option.
I am trying to get the background image of my content to appear behind the header and footer. Currently, the top of the content's background is sticking out onto the header, and you can see that the bottom has slightly covered the footer (notice the slight change of the footer's border colour). I have tried setting applying z-index:-100; to content which worked but also makes the text unselectable. I then tried applying z-index:1; to content, but that did not make the content appear under the header/footer.
link to website
//html
<div id="wrapper">
<header>
<div id="logo"></div>
<nav>
<ul>
<li id="aboutNav">home</li>
<li id="menuNav">menu</li>
<li id="specialsNav">specials</li>
</ul>
</nav>
</header>
<div id="content">
content <br> goes <br> here <br>
google
</div>
</div>
<footer>
<div id="thumbsDesc"></div>
<div id="thumbs"></div>
</footer>
//css
header {
width: 100%;
height: 100px;
background: url(../img/top.png) repeat-x;
z-index: 110;
}
#wrapper #content {
color: #FFFFFF;
background: url(../img/body.png) repeat-y;
width: 524px;
padding: 25px 30px 25px 30px;
position: absolute;
bottom: 100px;
top: 90px;
margin: 0 0 0 150px;
z-index: 1;
}
footer {
margin: -107px 0 0 0;
width: 100%;
height: 107px;
background: url(../img/bottom.png) repeat-x;
z-index: 100;
}
To solve the issue, you are using the z-index on the footer and header, but you forgot about the position, if a z-index is to be used, the element must have a position:
Add to your footer and header this CSS:
position: relative;
EDITED:
Also noticed that the background image on the #backstretch has a negative z-index, don't use that, some browsers get really weird...
Remove From the #backstretch:
z-index: -999999;
Read a little bit about Z-Index here!
For z-index to work, you also need to give it a position:
header {
width: 100%;
height: 100px;
background: url(../img/top.png) repeat-x;
z-index: 110;
position: relative;
}
Set your header and footer position to "absolute" and that should do the trick. Hope it helps and good luck with your project!