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;
}
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 want the size of my footer in the bottom of the page to be the same as my navigation bar in the top (with some white space in the corners).
The bar is inside a container which has container{margin:auto;}thats why there is white space in the corners .
I don't understand why the footer took the whole screen width, it is inside the same container as the bar on top.
here is the footer css:
.down{
position: absolute;
margin: auto;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: gray;
text-align: center;
}
I don't want to edit the margin left and right because it wont be responsive anymore
Tough to say without the HTML but try adding the following rule to the container:
.container {
position: relative;
}
The footer has a position absolute on it. By giving the container a relative position, the footer will be positioned relative to the container instead of the body.
This will cause the footer to not be attached to the bottom of the window, but the bottom of the content. So in addition, add a minimum height to the container:
.container {
min-height: 100vh;
}
you have to put your <div class="down"> inside the container
<div class="container">
<nav></nav>
<div class="down">
</div>
</div>
.down{
position: absolute;
margin: auto;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: gray;
text-align: center;
}
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;
}
I can't add a footer to the bottom of the page. It always displays in the middle of the page or something like that. It would be cool if there was some way to modify the footer div element to always show on the bottom of the page, even after adding more stuff to the center/top of the page (so not a fixed position).
Here's what I'm up to in CSS: (the id of the div is ofc "footer")
#footer {
text-align: center;
margin: 0px auto;
position: bottom;
bottom: 0px;
font-size: 10px;
padding: 10px;
}
I used something similar for my header (logo), and based on that I tried working the same with the footer with no success. Here's my header CSS, just for reference:
#logo {
position: center;
margin:0px auto;
top:0px;
text-align: center;
}
I used an image for the logo without any text and only text for the footer.
You need to add the following styles to your footer div in order to make it stick to the bottom of your website:
#footer {
position: absolute;
bottom: 0;
}
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.