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.
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 often have this problem with a lot of fixed navbars i.e. when I have a fixed navbar, how do I give the element below it some margin, so that the fixed navbar is not covering that element?
I was just wondering if there is a more elegant way of doing this apart from the <br> tag and margin-top.
The sample code would be like:
HTML code :
<nav>
I AM NAVBAR
</nav>
<br><br>
<div>
</div>
CSS code :
* {
padding: 0;
margin: 0;
}
nav {
height: 50px;
width: 100%;
background: #444;
color: #fff;
text-align: center;
font-weight: bold;
font-family: verdana;
position: fixed;
top: 0;
left: 0;
}
div {
height: 500px;
width: 100%;
background: tomato;
}
Fiddle here.
Fixed position relatives to the screen's viewport. You can just set top margin or padding on the body tag, and make the value >= the navbar height.
body {
margin-top: 50px; /*or padding*/
}
http://jsfiddle.net/5k5mxcn1/1/
There's a theory in CSS that you only apply bottom margins.
http://csswizardry.com/2012/06/single-direction-margin-declarations/
So to keep things modular, you could create a wrapping class:
<nav class="nav__wrapper">
<div class="nav__content">
Navigation
</div>
</nav>
<p>Text content</p>
css:
.nav__wrapper {
height: 30px;
margin-bottom: 10px // breathing room
}
.nav__content {
background: #dadada;
height: 30px;
line-height: 30px;
position: fixed;
width: 100%;
}
fiddle: http://jsfiddle.net/wv53qLwz/
A fixed element is position relative to the viewport, meaning it stays at the same designate spot and does not leave a gap in the page where it would normally have been located.
You can apply a top margin to the element that is directly following the fixed element.
div {
margin-top: 50px;
}
However, I've found out that using the scroll-margin property does the trick. It's explained better here https://css-tricks.com/almanac/properties/s/scroll-margin/#aa-enter-scroll-margin
div {
scroll-margin-top: 50px;
}
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.
I try to center a div element ( the footer div in this case ) in my webpage but it insists on staying on the left side.
I am not quite sure what is wrong... Any ideas?
Thank you in advance.
HTML :
<div id='main'>
</div>
<div id='footer'>Centered Text</div>
CSS :
* {
padding: 0;
margin: 0;
font-size: 12px;
}
body {
font-family: helvetica, serif;
font-size: 12px;
overflow-y:scroll;
}
#main {
border: 1px solid #bbbbbb;
margin: 3% 5%;
padding: 10px 10px;
}
#footer {
font-size: 75%;
margin: 0px auto;
position: absolute;
bottom: 0px;
}
http://jsfiddle.net/DjPjj/2/
http://jsfiddle.net/DjPjj/13/
Try this:
#footer {
font-size: 75%;
width: 100%;
position: absolute;
bottom: 0px;
text-align: center;
}
Because your footer is absolutely positioned, you must tell it what width to take relative to its parent container. You can then use text-align to center the text within it.
Here is another example: http://jsfiddle.net/DjPjj/17/
This one centers a box within the absolutely positioned element. The inner box can be centered using margin: 0 auto because it is not absolutely positioned.
#footer {
font-size: 75%;
width: 100%;
position: absolute;
bottom: 0px;
}
#footerInner {
margin: 0 auto;
width: 300px;
background-color: #ddd;
text-align: center;
}
This is more flexible because the inner element gives you a new container to work with that is centered relative to the parent.
The reason it won't center is because of the positon: absolute;.
Keep in mind this means that the footer will always be at the bottom of the page, even if the content overflows past it. It will overlap. If you want to have it be attached to the bottom of the page, you must set the min-height of a container above it to 100% and then deal with a negative margin-top and remove the position: abosolute;
http://jsfiddle.net/4fuk7/1/
Notice how the centered text is overwritten.
If you are looking for something to always be at the bottom, this would work
http://jsfiddle.net/4fuk7/3/
Sorry, the last one would scroll to the top. This one doesn't, but you'd need to fiddle with it a bit to get it to properly align around the margin's you've set. http://jsfiddle.net/4fuk7/9/
http://www.tlunter.com/Layout 2/ is where I did something similar. You can reference that if you want.