So im making a very basic website with a photo gallery, I have this css for my footer.
#footer
{
color: #f0c;
font-size: 9px;
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #c00;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 18px
And the bar does not scroll down with the rest of the page, instead scrolls up with the page like this: http://i.imgur.com/yqM9WDM.png
Help much apreciated!
I'm not totally sure what you're trying to achieve from your description, and can't comment. Are you trying to keep the red bar at the bottom of the window?
In that case, the important CSS is:
#footer {
position: fixed;
bottom: 0;
}
That will stick it to the bottom of the viewport (scrolling viewable area). The rest of the styling is up to you.
By the way, it would be better to use a class (.footer) than an ID (#footer) for this.
Use position: fixed or position: sticky instead of position: absolute to fix something on page. Read this article for more understanding how position works.
If I understand you correctly then what you want is to use position:fixed not position:absolute
Fixed position will literally fix your element in place.
Here's a fiddle with it in action - http://jsfiddle.net/mSE6c/
does this work for you?
CSS:
* {
margin:0;
}
html, body {
height: 100%;
}
#inhalt {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px;
}
#footer, #clearfooter {
height: 30px;
}
HTML:
<div id="inahlt">Inhalt <div id="clearfooter"></div></div>
<div id="footer">Footer</div>
Source:
http://www.flashjunior.ch/school/footers/fixed_stop.cfm
Use position:fixed instead of position:absolute, this will keep it in a single position.
http://jsfiddle.net/PM9Xt/ shows this while it's in action. top:0 keeps the header at the top, while bottom:0 keeps the footer at the bottom.
Related
I'm a coding a simple navbar component with 100% width and a margin, but no matter what I try it always seems to be way off the page on the right side of the screen. Any idea where the problem could come from?
I've tried to simplify things by creating a simple box within a div and giving it 16px margins, but I have the same problem. I was thinking maybe my CSS inherits from conflicting property of the body but after checking the inspector that doesn't seem to be the case.
Thanks for any insights!
//_navbar.scss
.box {
position: absolute;
width: 100%;
background: black;
margin: 16px;
}
// _navbar.html.erb
<div class="box">
Hello?
</div>
Because width: 100% PLUS margin: 16px is more than 100%.
Maybe you want to apply the margin to the body or whatever container is the parent of .box?
By adding this body property to CSS you disable the automatic 8px margin that the body tag has.
Try this new CSS stylesheet.
.box {
position: absolute;
background: black;
margin: 16px;
position: fixed;
right: 0px;
left: 0px;
}
body {
margin: auto;
}
I have no idea how to fix this.
Putting things on position: relative will null out the bottom: 0px, and will also create tons of white space on pages that don't fit the entire height due to lack of content.
Putting it on absolute makes it cover content of pages that do have content long enough to generate a scroll bar.
.footer {
width: 100%;
height: 150px;
background: #3167b1;
position: absolute;
bottom: 0px;
}
This should be working right? For some reason it just doesn't. Is it Wordpress? Never had this problem before and I have already gone through and cleaned up a lot of issues that may have caused it.
EDIT:
Silly me... I forgot the html here.
Right now it has nothing in it so it is just:
<div class="footer"></div>
I have it like that just to test it.
To see what is happening you can visit it here:
http://www.yenrac.net/theme
I hope that helps clarify some things.
I have also created this theme from scratch.
If I got your question right, this should work:
http://jsfiddle.net/9qq1dtuf/
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 170px;
}
.footer {
width: 100%;
height: 150px;
background: #3167b1;
position: absolute;
bottom: 0px; left: 0;
}
Please try bellow css
.footer {
position: fixed;
bottom: 0;
height: 150px;
background: #3167b1;
width: 100%;
left: 0;
}
<div class='footer'>
</div>
Well, I doubt it's Wordpress ...unless you are using a pre-made theme (or something along those lines). It's pretty hard to see what you've done without seeing the HTML. But anyways, heres what I think might have been the problem:
You have selected the footer element that has a class of "footer". I'm going to go ahead and make an educated guess that you meant to select the footer element by its name (NOT it's class). So maybe it's just a small little tiny bitty fix (i.e. remove the "." before footer in your CSS):
footer {
width: 100%;
height: 150px;
background: #3167b1;
position: absolute;
bottom: 0px;
}
Just add this to your css:
body {
margin: 0;
padding: 0;
background: #efefef;
font-family: 'Lato', serif;
padding-bottom: 174px; //add this line - height of footer + margin from content
}
I added 24px margin from content as an example. It would be best if you added this to your css:
* {
box-sizing: border-box;
}
or just for the body
body {
box-sizing: border-box;
}
So as your added padding does not add to your height and you get unnecessary scroll-bars.
I am having some trouble, my footer won't stay at the bottom of the page, it "sticks" to the bottom of the screen when I scroll.
It ends up covering up parts of the page as I scroll and gets quite annoying.
Here is my HTML:
<div id="footer" style="text-align: center">
<p>Designed by ddrossi93. ©2015. All Rights Reserved.</p>
</div>
And my CSS:
#footer {
border-top:1px solid;
text-align: center;
height: 60px;
background: #789;
font-weight: bold;
bottom: 0;
left: 0;
position: fixed;
width:100%;
}
If you need more info, let me know and I can post more of my code.
You should change the position:fixedtoposition:relative,not position:absolute. fixedmakes your element stay at a specified position relative to the screen's viewport and will not move when scrolled.If you change to absolute,you have to add position:relative to the containing block or the ancestor,so it will not sit in the middle of your page.Change to relative is the right way.
As to "some white space left at the bottom"? Try to add the following code in your style:
body {margin:0;}
position: fixed;
Means your footer will hover at the bottom of the page, the same way a navbar will on many websites. If you want your footer to stay at the bottom of the page, you need to change position to something else like absolute or relative. Here's a link to more info. http://www.w3schools.com/css/css_positioning.asp
Try changing the position in the CSS to absolute.
#footer {
border-top:1px solid;
text-align: center;
height: 60px;
background: #789;
font-weight: bold;
bottom: 0;
left: 0;
position: absolute;
width:100%;
}
Another solution is to set the margin and padding of the body element to 0;
body {
padding: 0;
margin: 0;
}
I am trying to make a footer that spans the width of a page minus 10px on the left and right. I am trying to do this by giving the body a padding on all sides of 10px. In the code below the header works just fine, but the footer is ignoring the body padding on the right side. Why is it doing that and how can I fix it?
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding:0;
margin:0;
}
body {
margin: 0;
padding: 0 10px;
}
#header {
height: 150px;
width: 100%;
margin: 0 auto;
background: #333;
}
#footer {
position: fixed;
bottom: 5px;
width: 100%;
background: #f63;
text-align: center;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="footer">I am the footer!</div>
</body>
</html>
your footer not ignoring body padding, look through console at that element sizes and you will see that width of your footer is 100% of window width + 10px from left padding + 10px from right padding.
you can use calc function in css: https://developer.mozilla.org/en-US/docs/Web/CSS/calc
#footer {
width: calc(100% - 20px);
}
JSFiddle
Footer width and padding are calculated separately. You can use use box-sizing: border-box to prevent this from happening
Use this for all elements to behave this way
* {
box-sizing: border-box;
}
There is a good video by Travis Neilson on his YouTube channel DevTips, where he explains the box-modal concept.
#footer {
position: fixed;
bottom: 5px;
left: 10px;
right: 10px;
background: #f63;
text-align: center;
}
demo: http://jsbin.com/benosofo/3/
A fixed element is not fixed in relation to the body, it's fixed in relation to the window. If it would be fixed in relation to the body then it would be just as absolute positioning, and it would scroll with the body.
You can make a fixed container for the footer, so that you can use a padding on that.
HTML:
<div id="footercontainer"><div id="footer">I am the footer!</div></div>
CSS:
#footercontainer {
position: fixed;
bottom: 5px;
width: 100%;
padding: 0 10px;
}
#footer {
background: #f63;
text-align: center;
}
None of the solutions in the net worked for me. so I solved it another way. I was trying to create a modal for adding address and was testing it on the mobile mode. I wanted a fixed layer with rgba(0,0,0,0.75) to cover all the window and in the center, a white form appear for the user. the form header was hiding in the top (and unscrollable) and in the bottom, was sticking to the bottom of window which was not looking good (in some cases, some element won't work when they don't have enough space from the window borders).
so I solved the problem by putting a div after the form div in the bottom (to stick to the window bottom instead of my form) and made it transparent. so it worked! (I have to mention that I am writing react code)
this is my div:
<div className="modal-padding"/>
and this is my styling for this div:
.modal-padding {
width: 100%;
border: 10vh solid transparent;
}
I used one, before the form div and one after that.
Be careful. I tested giving a width: 100vw and height: 10vh to the div but when it has no content, it doesn't work, seems it doesn't exist at all. so I gave a border.
I hope this solve your problem too, or give you an idea for solving the issue.
Good luck.
You could make a wrapper for your footer and apply the 10px padding to that instead.
#footer-wrap {
position:fixed;
bottom:0px;
left:0px;
padding:10px;
}
and then when you place your footer inside it will be correctly padded. This way is the most backwards compatible solution as it doesn't rely on css3 calc.
JSFIDDLE
http://jsfiddle.net/pk8uU/
Hi I have a css issue as I am trying to stick a footer to the bottom of the page but it only sticks it as far down as the viewport goes and not the bottom of the document.
Can somebody help me understand why this is please?
My css and html is pretty simple although after reading lots of examples and trying things out I still cant get this to work. I dont want my footer inside the wrapper, rather outside of it and I also dont want to set height:100% on the wrapper.
My html looks like below:
<div class="wrapper">
... some content
</div>
<div class="footer">
</div>
And my css:
html {
height: 100%;
margin: 0;
padding: 0;
position:relative;
}
body {
position:relative;
height: 100%;
background-color: #D8D8D8;
margin: 0;
padding: 0;
font-family: "Trebuchet MS", Verdana, tahoma, arial, serif;
font-size: 12pt;
}
.wrapper {
position:relative;
margin-left: auto;
margin-right: auto;
width: 1024px;
padding: 6px;
margin-bottom: 30px;
}
.footer {
position: absolute;
bottom:0;
left: 50%;
margin-left: -512px;
height: 25px;
background-color: #E6E6E6;
width: 1024px;
padding: 6px;
clear:both;
}
is it possible to do this with the footer outside of the wrapper?
I thought that setting position absolute on the footer would mean it would be positioned based on the body or html as they are the next elements up with a position:relative but bottom:0 seems to just be the bottom of the viewport even though the wrapper div extends far past this with lots of content.
The consequence of this is that when there is a lot of content within the wrapper the footer actually sticks mid way up the page as bottom is calculated as the bottom of the viewport.
Thanks
Positioning need not be used all the time. The attribute is meant only for certain cases to specially "position" content.
I think removing
position: absolute;
from
.footer
should solve the problem.