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;
}
Related
I'm theming a Drupal website and using the vegas full screen bg.
I want to achieve the following:
But I have some trouble by theming the footer: I want it to be always displayed under the background image (so you have to scroll down to see the footer) now it keeps coming over the background image. Besides that I want the main menu and footer to become full width and not 960px like the container. But I can't seem to get these 2 to 'break out' the container.
Now I've:
#footer {
position: absolute;
bottom:0;
width: 100%;
height:100px;
background-color: #202020;
}
#primary-menu-bar{
position: absolute;
width: 100%;
height: 60px;
padding: 0;
margin: 0;
background-color: rgba(255,255,255,0.70);
padding-top: 10px;
}
Normally something like this does the trick but I'm struggling to get this right...
Anybody any advice or solutions?
You didn't show any HTML, so I just came up with some HTML myself. If the footer is only visible when you scroll down you need to have some sort of wrapper for both your header and your content element. You can then set the wrapper min-height to 100% and use background-image/background-size for a full-screen image background.
HTML:
<div class="wrapper">
<header class="page-head" role="banner">
Header
</header>
<main class="main" role="main">
Content
</main>
</div>
<footer class="page-foot" role="contentinfo">
Footer
</footer>
CSS:
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
background-image: url(http://placehold.it/1200x800);
background-position: center center;
background-size: cover;
}
.page-head {
background: red;
}
.main {
width: 80%;
margin: 0 auto;
background: yellow;
}
.page-foot {
background: blue;
}
See example on this pen.
here is a possible solution: http://jsfiddle.net/09mcoo2h/1/
as i said in the comment below your question: you need to have footer and header outside the container (that is the only with 960px)
To have a footer TO THE BOTTOM of the page, just set the body as position:relative.
HTML
<div id="primary-menu-bar"></div>
<div id="container"></div>
<div id="footer"></div>
CSS
body {
margin:0;
padding:0;
position:relative;
}
#container {
display:block;
width:960px;
height:1600px;
background:#eee;
margin:0 auto;
}
#footer {
position: absolute;
bottom:0;
width: 100%;
height:100px;
background-color: #202020;
}
#primary-menu-bar{
width: 100%;
height: 60px;
top:0;
background-color: #F00;
padding-top: 10px;
}
It's really hard for us to do it like this with out HTML.
So basically what you need to do is place the footer and header outside the container. Because the container is 960px, so the header and footer can go over it.
The structure should be like this:
<body>
<header></header>
<div class="container"></div>
<footer></footer>
</body>
Example on codepen
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page
(37 answers)
Closed 9 years ago.
What is best practice for setting up a web page so that if there is very little content/text to be displayed on that web page the footer is displayed at the bottom of the browser window and not half way up the web page?
What you’re looking for is the CSS Sticky Footer.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow: auto;
padding-bottom: 180px;
/* must be same height as the footer */
}
#footer {
position: relative;
margin-top: -180px;
/* negative value of footer height */
height: 180px;
clear: both;
background-color: red;
}
/* Opera Fix thanks to Maleika (Kohoutec) */
body:before {
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px;
/* thank you Erik J - negate effect of float*/
}
<div id="wrap">
<div id="main"></div>
</div>
<div id="footer"></div>
You could use position:fixed; to bottom.
eg:
#footer{
position:fixed;
bottom:0;
left:0;
}
HTML
<div id="footer"></div>
CSS
#footer {
position:absolute;
bottom:0;
width:100%;
height:100px;
background:blue;//optional
}
Perhaps the easiest is to use position: absolute to fix to the bottom, then a suitable margin/padding to make sure that the other text doesn't spill over the top of it.
css:
<style>
body {
margin: 0 0 20px;
}
.footer {
position: absolute;
bottom: 0;
height: 20px;
background: #f0f0f0;
width: 100%;
}
</style>
Here is the html main content.
<div class="footer"> Here is the footer. </div>
set its position:fixed and bottom:0 so that it will always reside at bottom of your browser windows
use this style
min-height:250px;
height:auto;
Trying to make the footer stick to the bottom and the content become automatically centered in between the header and footer.
Currently using this technique: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
But my footer appears way below and creates a huge gap in between.
Website: Stingrayimages.ca
Edit: So i managed to get the footer to stick to the bottom. However, the footer is not at the bottom of the page, it leaves a little bit of a scroll. And when shrink the window, the footer doesnt stop where the content.
Also i cant get the content div to stay in the middle without messing everything up.
Your container div should wrap your Head div. I think you mistook Ryan's head area for what designers commonly refer to as the header of the page, when in fact in the example it's the head element of the html. The extra space on the bottom is likely equal to the height of your head div.
In the sticky footer, remember, the container wraps all body content but the footer.
If you are using the same technique as the link, you are missing position at the footer.
And still, with the example you linked, see the structure:
<style type="text/css">
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
</style>
<div class="wrapper">
<div class="header"></div>
<div class="push"></div>
</div>
<div class="footer"></div>
But i would rather go with something like this:
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
}
div#container {
position: relative;
margin: 0 auto;
height: auto !important;
height: 100%; /* IE6: min-height*/
min-height: 100%;
}
div#header {
}
div#content {
padding: 1em 1em 5em;
}
div#footer {
position: absolute;
width: 100%;
bottom: 0;
}
</style>
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
I'm having a problem with a webpage.
I'm using the min-height property to place the footer at the bottom of the page (if content is not long enough) and after the content (if content is longer than the window). There are plenty of tutorials that describe this method and I too did it this way.
html, body { height: 100%; }
.container {
min-height: 100%;
position: relative;
}
.footer {
position: absolute;
bottom: 0;
}
and some other code. It works fine then.
The problem occurs when I create two additional divs to add drop shadows to the container div. I have:
<div class="left-shadow">
<div class="right-shadow">
<div class="container">
...
</div>
</div>
<div>
I figured html and body height remain 100%, left-shadow div have min-height of 100%, and right-shadow and container have height of 100% (I'm assuming that the 100% will mean 100% of the height of the parent element).
However, it does not work (in Firefox, it works in Chrome, I don't really care about IE), and I've tried all sorts of combinations to get it right, but to no avail. Any help would be appreciated.
EDIT: (partial code)
<html>
<head>
...
</head>
<body>
<div class="left-shadow">
<div class="right-shadow">
<div class="container">
<div class="header">
header content
</div>
<div class="content" >
content goes here
</div>
<div class="footer">
footer content here
</div>
</div> <!-- end container div -->
</div>
</div>
</body>
</html>
And the relevant css:
html {
overflow-y: scroll;
height: 100%;
}
body {
margin: 0 0 0 0;
height:100%;
}
.left-shadow
{
width: 1084px;
background: url("images/left-shadow.png") repeat-y left;
/* both bg images are 30px wide. 1024 + 30 + 30 = 1084px */
margin: auto;
min-height: 100%;
}
.right-shadow
{
width: inherit;
background: url("images/right-shadow.png") repeat-y right;
margin: auto;
height: 100%;
}
.container {
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
width: 1024px;
height: 100%;
}
EDIT 2:
So I just found out that this question belongs at doctype. So from now on, I'll ask questions in the right place. But since this is already up, I'd ask that people respond anyway without getting into where questions should be posted. Thanks.
First of all, to create a shadow effect use CSS. If CSS solution isn't what you're looking for then maybe try to set a shadow as a background image of .container. Right now your mark-up is overloaded by unnecessary elements.
But if that extra mark-up is the only way to do what you want to do, then try something like this:
* {
margin: 0;
padding: 0;
}
html, body, .shadow, #container {
min-height: 100%;
}
#container {
position: relative;
}
#content {
padding-bottom: 55px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background: #0a0;
}
And HTML mark-up (these shadow divs make it look terrible):
<body>
<div id="shadow-left" class="shadow">
<div id="shadow-right" class="shadow">
<div id="container">
<div id="content">
Page contents
</div>
<div id="footer">
Footer
</div>
</div>
</div>
</div>
</body>
I really recommend using this simple solution for a "sticky footer" instead. Just gets rid of problems: http://ryanfait.com/sticky-footer/
All that it requires is for you to be able to define a fixed height for your footer, which should be no problem in virtually all cases.
Works in all common browsers!
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;
}