I am using css
/* This css is for sticky footer*/
#ft {
background-color: #445379;
bottom: 0;
color: #fff;
height: 42px;
left: 0;
line-height: 42px;
padding: 8px;
position: fixed;
text-align: center;
white-space: nowrap;
width: 100%;
z-index: 99;
}
I changed the position from fixed to relative then there is a white space showing up. How can i remove it. it is fine while the position is fixed.
The white space may be from the body element. Most css resets/normalisers remove it. try:
body, html{
margin:0;
padding:0;
}
When using position: relative; you can move elements around the page but it will still keep its original form on its original position. like you would cut out a square from the middle of a piece of paper. You will still have the hole in the paper when moving the square.
Use position: absolute; if you want the white space gone.
Hope that makes sense.
Also, set the parent element to position: relative; if you do not want the absolute positioned element to jump over the page when positioning it.
html code
<div id="all-site-wrap">
<nav></nav>
<content></content>
<footer></footer>
</div>
in the styles
.all-site-wrap{
display:flex;
min-height:100%;
flex-direction:coloumn;
justify-content:center;
}
Related
I have made footer for my website and it works fine until i press f11/go into fullscreen, where the footer is suddenly placed not all the way at the bottom but there is a space between my footer and the bottom of my page where there is only white/my background color. Shown in the pictures linked below:
Normal: https://i.stack.imgur.com/Cxi35.png
In fullscreen: https://i.stack.imgur.com/405JV.png
html
footer {
background-color: #000000;
border-color: #000000;
position: relative;
line-height: 10px;
width: 100%;
height: 50px;
bottom: 0px;
left: 0;
right: 0;
text-align: center;
line-height: 50px;
font-size: 10px;
}
<div class="footer">
<footer>
<a>text</a>
</footer>
</div>
You almost have it. If you want it to always be at the end of the page (even with scrolling), use position: absolute. To avoid it covering content at the end of the scroll, give the html tag padding on the bottom.
html {
padding-bottom: 50px;
}
footer {
background-color: #000000;
border-color: #000000;
position: absolute;
line-height: 10px;
width: 100%;
height: 50px;
bottom: 0px;
left: 0;
right: 0;
text-align: center;
line-height: 50px;
font-size: 10px;
}
<div class="footer">
<footer>
<a>text</a>
</footer>
</div>
There are multiple ways to solve this.
You can use add the following to your footer :
position : absolute;
bottom: 0;
left : 0;
width : 100%
The problem with this is that when the rest of the content on your page gets long enough to get to the footer's position, the footer would overlay it. You can solve this by adding a bottom margin to the last div before your footer that's at least the height of the footer.
Another way to deal with it is to give the body a minimum height of 100vh and either make it flex and give the footer a margin top of auto or give the footer a fixed height and give it a margin top of auto. Should work just as well.
(Quick tip if you didn't already know: there's footer tag in HTML that you could use instead of a div tag. It makes absolutely no difference but does provide semantic help for someone reading your code)
body{
background:white;
color:darksalmon;
padding:0;
margin:0;
height:100%;
width:100%;
}
.foot{
background:black;
color:lightblue;
bottom:0;
position:fixed;
width:100%;
height:18%;
}
<body>
<div class="foot">
<footer>
text
</footer>
</div>
Try this it worked for me when I was struggling with thesame problem
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/
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.
How do I push a footer to the bottom of my page? Here is an example of what I currently have: hansmoolman.com
As you can see the footer is pushed underneath my 2 left and right containers. How can I fix this. I have used relative positioning for some elements as the red banner had to be pushed over the header bar and given a + z-index. I found some solutions online to stick the footer to the bottom but this does not solve my problem as the footer still appears aver my 2 columns if the content in them is not big enough to fill the whole page.
So what I want is for the footer to always follow BELOW all the rest of the content (the sticking to the bottom I can solve later).
There is a bit of CSS code so havent added it here, but can add it if needed
Your CSS Looks Like:
#footer {
background-color: #FFFEF0;
border: 1px solid #000000;
clear: both;
height: auto;
margin-top: -100px; /* >> Remove This*/
overflow: hidden;
position: relative;
top: -200px; /* >> Remove This*/
width: 100%;
z-index: -1;
}
Remove following css rules from #footer
top: -200px;
margin-top: -100px;
Try clear:both for your footer container tag, considering it has display:block; set
To align the contents right. You have to make some changes in your css.
First of all remove :
top: -200px;
width: 100%;
z-index: -1;
From your #footer .
And change your #mainContentContainer to :
#mainContentContainer
{
min-height: 400px;
overflow: auto;
position: relative;
width: 100%;
}