I am absolutely positioning a footer at the bottom of the browser window, using the following code:
HTML
<html>
<body>
<div id="content">
Content
</div>
<div id="footer">
Footer
</div>
</body>
</html>
CSS
#content {
margin-bottom: 20px;
background: red;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background: blue;
}
This works just as intended, however when I make the browser window smaller the footer will eventually cover the main content. What is the most efficient way of preventing this?
Thanks in advance.
You need a Sticky Footer.
Demo
Here is another example using pseudo-elements. You may have some issues with old versions of IE, but it allows you to forgo un-semantic elements.
Try this:
#content {
padding-bottom: 20px;
background: red;
}
#footer {
position:fixed; //Changed to fixed
bottom:0px;
width:100%;
height: 20px;
}
Related
I'm having a small css issue with a basic html layout .
What is want is this : (without content)
http://jsfiddle.net/cge89ef4/1/
With content : http://jsfiddle.net/cge89ef4/2/
As you can see , the footer remains stuck and does not go to the bottom of the page as i want it too.
CSS :
body {
background-color: blue;
color:red;
margin: 75px auto 50px;
height:100%;
}
div#fixedheader {
position:absolute;
top:0px;
left:0px;
width:100%;
height:75px;
background:yellow;
}
div#fixedfooter {
position:absolute;
bottom:0px;
height:50px;
left:0px;
width:100%;
background:black;
}
Any way to fix it ?
Thanks
UPDATE
I have changed the DOM to HTML5 Tags for Header and Footer , I have also added a little JavaScript that reacts to the window resizing.
So IF your window height is more than the document height the footer is positioned absolute to the bottom, IF not the footer is positioned FIXED above the content
Also if you scroll down and the header is not visible any more it becomes fixed above the content as well
http://jsfiddle.net/cge89ef4/8/
UPDATE END
Here http://jsfiddle.net/cge89ef4/3/
change absolute to fixed for footer
position:fixed;
If you dont want the footer to overlap your content at any time you should add a margin or padding bottom to the content container with the height of the footer.
In addition you could look intho HTML5 tags , because there are already preset tag names for header, footer etc
For exampe:
<header></header>
<article><section></section></article>
<aside></aside>
<footer></footer>
use this styling for your body
body{
position: relative;
margin: 0;
}
Just make sure you give position: fixed to header and if you want the footer not to be fixed all the time, use a min-height.
body {
background-color: blue;
color: red;
margin: 75px auto 50px;
height: 100%;
}
div#fixedheader {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 75px;
background: yellow;
}
div#fixedfooter {
position: fixed;
bottom: 0px;
height: 50px;
left: 0px;
width: 100%;
background: black;
}
Fiddle: http://jsbin.com/behajakuse/1/edit?html,css,output
have the body position: relative;
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I've tried everything to get my fotter stick to the bottom of the page, but I keep having this blank space below it.
Here is my html structure:
<html>
<body>
<div id="wrapper">
<header>
</header>
<div id="main">
</div>
</div>
<footer>
</footer>
</body>
</html>
The css:
#wrapper {
margin:0 auto;
width:1350px;
background-color:#fff;}
#main {
margin:0 auto;
width:1200px;
position:relative;}
footer {
clear:both;
background-color:#484545;
height:120px;
width:100%;
position:absolute;
bottom:0px;
left:0px;}
Things I've tried so far:
Footer inside wrapper, wrapper with position:relative, footer with position:absolute; bottom:0px. Not working, footer appears in the middle of the main content.
Footer inside body. Same as above.
Footer outside wrapper.
Pusher
Margins and paddings for #main with same height as footer.
Pretty much everything I've researched so far.
¿Any help plesase?
Thank you in advance.
PS: Sorry for my english, I'm not a native english speaker.
SOLVED: Forgotten div inside the footer with position:relative bottom:10px that made the whole footer moove a bit upwards creating this blank space below it.
You need to set the dimensions of your body to fill the viewport html, then, your absolute positioning will work:
html{
width:100vw,
height:100vh;
margin:0;
}
Alternatively as noted in the other answer - you can set position:fixed, although this will have different behavior in terms of how the element appears in relation to your other content.
body {
height: 100vh;
width: 100vw;
margin: 0;
}
footer {
height: 20px;
position: absolute;
bottom: 0;
width: 100%;
background: blue;
}
<footer></footer>
What you want is "position: fixed;" and not "absolute".
footer {
clear:both;
background-color:#484545;
height:120px;
width:100%;
position:fixed;
margin-bottom: 0px;
bottom:0px;
left:0px;}
You code is working. I have created a jsfiddle with your code and is working fine. https://jsfiddle.net/jithinnjose/270oa889/
#wrapper {
margin: 0 auto;
width: 1350px;
background-color: #fff;
}
#main {
margin: 0 auto;
width: 1200px;
position: relative;
}
footer {
clear: both;
background-color: #484545;
height: 120px;
width: 100%;
position: absolute;
bottom: 0px;
left: 0px;
}
<div id="wrapper">
<header>
</header>
<div id="main">
</div>
</div>
<footer>
</footer>
Try
position:fixed;
for footer or make a separate div for footer and assign the above mentioned css to that div
Try this magic with flexbox.
JSBIN
HTML
<div class="container">
<header role="banner"></header>
<main role="main">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</main>
CSS
html, body {
height: 100%;
min-height: 100%;
}
body {
margin: 0;
display: flex;
flex-direction:column;
}
.container {
overflow-y: scroll;
flex: 1;
}
header[role="banner"] {
height: 48px;
background-color: purple;
}
main[role="main"] {
background-color: deeppink;
flex: auto;
}
footer[role="contentinfo"] {
flex-basis: 48px;
background-color: gold;
}
Ok guys, I fixed it!!!
My stupidity has no limits. Sometimes you just focus on trying to fix one thing and you are not looking in the right place!!
The thing was I had a forgotten div inside the footer with position:relative. That was forcing my footer to go a bit upwards, creating this blank space below it.
Thank you so much for your time, really, much much appreciated, you had no chance to solve my problem since my forgotten div was not posted here, but you did made me think outside the box.
Cheers!
I'm currently having a few issues keeping my footer at the bottom of the page and below the content. I currently have it sitting at the bottom of the page, just keeping it below the content seems to be the issue.
My footer layout is:
#footer
#footer-content
p.copyright
p.credit
/#footer-content
/#footer
My stylesheet:
#footer {
overflow: hidden;
clear: both;
max-width: 940px;
padding-top: 26px;
border-top: 1px solid #bbb;
color: #aaa;
position: fixed;
height: 80px;
width: 50%;
bottom: 0;
right: 0;
left: 0;
margin: 0 auto;
padding-bottom: 0;
text-align: center;
}
#footer-content {
width: 100%;
}
Setting position to absolute makes the whole footer disappear somewhere off the page so I can't just change that.
What can I do to keep my footer below the content? I'm open to any JavaScript solutions.
FIDDLE (Since it's WordPress I can't copy over everything)
EDIT:
Made a few edits. Still doesn't change my problem.
What you are describing is a footer that's on the bottom of the content. Defining the stuff in your footer div is unneeded information. You could have a diamond unicorn in the footer for all we care. The real information that's needed is the basic layout aka header region, content region, sidebar regions, footer region.
here is a live demo of what this will do http://matthewjamestaylor.com/blog/bottom-footer-demo.htm
This will expand the content on short content to push the footer to the bottom. for longer content the footer is under the content as the content gets bigger.
HTML
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS
html,body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
You need a container that will take up the view area and by setting the footer div to the absolute bottom of the container it will be on the bottom. the content "body" will expand the container as needed and the footer will be on the bottom just under the content every time. divs by default have a display:block so they will push to the next line every time.
I use this code across any websites that I make and it works for me -
#footer{
display: block;
text-align: center;
font-size: 0.75em;
bottom:0;
width: 100%;
height: 30px;
position: fixed;
}
I would believe that all your position: fixed is causing the problem, so I've tried cleaning it up for you in this JSFiddle.
The position: fixed; sets the divs position relative to the browser-window, and not the page.
I have editted your JSFiddle to apply a 'sticky footer'.
Your document structure had to change for that:
body
#container
...content...
#wrap-push
#footer
added this css:
html, body {
height: 100%;
}
#container
{
height: 100%;
margin-bottom: -107px;
}
#wrap_push
{
height: 107px;
}
#footer
{
height: 80px;
}
I'm stuck trying to make the footer stick to the bottom of the page.
This is the basic layout:
<div id="div-header"></div>
<div id="div-body">
<h2>Some content</h2>
<div id="div-left">Left content</div>
<div id="div-right">
right content
</div>
</div>
<div id="div-footer-bottom"></div>
And this is how I style the footer:
#div-footer, #div-footer-bottom{
background-color: red;
border-top: 1px solid #CCCCCC;
height: 40px;
padding: 20px 30px;
text-align: right;
}
#div-footer-bottom{
position: relative;
clear: both;
}
As you can see below, the page is rendered OK when the browser is zoomed at 100%:
But if the browser is zoomed at 120%, for example, this is how the page is displayed:
Please take a look at the full code in jsfiddle to discover what I am doing wrong, since I don't know what else to try:
http://jsfiddle.net/RS88D/
Thanks in advance.
Try adding the following css
#div-footer-bottom{
position: fixed;
bottom:0;
left:0;
clear: both;
width:100%;
}
For overlapping
Add margin-bottom to the div-left. Margin should be equal to the height of the footer (add padding pixels also). In your case
#div-left
{
margin-bottom: 80px;
}
Update 24-Mar-2014
For your first fiddle details just add the below and try,
body, html
{
height:100%;
}
And in the #div-body css, remove min-height: 490px; and add min-height: calc(100% - 190px);
div.footer {
position: absolute;
background: silver;
height: 200px;
bottom: 0;
}
I've sticked my footer to the bottom of the page, but if the content is long it is covered by this footer, how to avoid that?
You can add a margin to the bottom of the content area the same as the height of the footer.
Take a look at this fiddle: http://jsfiddle.net/X3B4c/2/
HTML:
<div id="content">
<!-- many lines -->
</div>
<div id="footer">© 2014 SomeCompany Inc.</div>
CSS:
#content {
height: 100%;
margin-bottom: 30px; /*same as #footer's height*/
background: #555;
}
#footer {
position: fixed;
bottom: 0px;
height: 30px;
width: 100%;
background: #999;
}
The reason for that maybe because you have position set to absolute.
Could you link the full coding of html and css?
Here is something which might help.
<!DOCTYPE html>
<html>
</html>
<head>
</head>
<body>
<header></header>
<section></section>
<nav></nav>
<aside></aside>
<footer></footer>
</body>
Just think of this as a 3D object and your footer is coming infront of your elements or body. Use this structure. :)
one thing You can do is rather then using position:absolute use position:fixed this will stick at that points.
Hope that helps
change the position: absolute to position: fixed
DEMO
div.footer {
position: fixed;
background: silver;
height: 200px;
bottom: 0;
}
Like this
demo
css
*{
margin:0;
padding:0;
}
div.footer {
position: fixed;
background: silver;
height: 200px;
bottom: 0;
width:100%;
}
use the z—index property
img. {position:absolute; top:0; z-indez:-1;}