I tried having my footer stick to the bottom of the page, but the more content I add to my body, then it just goes out of bounds. I can't see a fault in my CSS, so hopefully one of you will be able to sort it.
.footer {
padding-bottom: 0;
background: gray;
width: 100%;
position: absolute;
height: 50px;
bottom: 0;
left: 0;
right: 0;
}
Here is a JSFiddle: https://jsfiddle.net/367apj76/
Many Thanks for the help.
Remove the position: absolute; from .footer
UPDATE:
You should put everything but the footer in a div with the following CSS:
min-height: calc(100vh - *footer-height*px);
and the footer should go right after this div.
This will work because the new div cannot be smaller than the window size minus the footer, but grows with the window (that's what vh is for).
Related
It's a little bit strange.
In my 2 HTML pages i have a footer that is equal to both but in one, that is shorter than the other, the footer goes up and leave a space at the bottom of like 30px.
(In the longer page the footer stay attached to the bottom)
Here is the css of the footer and the body:
footer{
background-color: #0b2239;
position: absolute;
width: 100%;
}
html, body{
min-height: 100%;
}
I've tried to resolve it by adding bottom: 0; but in the longer page the footer go over the other element in the page
You just need to add to the footer the value bottom: 0;
footer{
background-color: #0b2239;
position: absolute;
width: 100%;
bottom: 0;
}
html, body{
min-height: 100%;
}
I'm not currently a great front-end guy, and right now I have a problem with my footer in my application. I wrongfully gave it max-width in the css. Basically I want it to always be on the bottom of the page no matter what size the screen is or how much content is on the page. Here is a screen shot of what I'm currently working with.
Screenshot:
Notice how the footer is kinda floating there in the middle of nowhere. I'd like it to be at the very bottom of the page right there. And if the user were to adjust the screen the footer would remain at the bottom. Here is my current HTML and CSS
HTML:
<div class="footer">
Copyright # 2016 Lockdown Inc
</div>
CSS:
.footer {
border-top: 1px solid #d3d5d5;
text-align: center;
margin-top: 40px;
padding: 20px;
background-color: #d2d2d2;
}
Any help with this would be great.
This is the general idea. Without your markup, I can't give you a more specific answer, but this should do it. position: fixed; will keep it at the bottom of the window.
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
If you'd rather have it at the bottom of the page, not necessarily the window...
body,html {
min-height: 100vh;
position: relative;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
For reference, this is a good article on the differences between position: fixed; and position: absolute;, and why position: relative; is important when you use position: absolute; https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
My requirement is a page with a fixed position header and full border around the page.
Setting this up is simple, but I have a problem with the fixed position header overlapping the page border.
Visually, this shows the problem:
You can see the fixed position header overlaps the border on the right. My aim is to prevent this from happening.
This the relevant block of code I believe - testing this by setting position to relative, for example, will stop the header overlapping the right border, but I need the header to be fixed.
.site-header {
min-height: 100px;
background: blue;
position: fixed;
width: 100%;
z-index: 10;
}
Here is a pen to demonstrate the issue in full:
http://codepen.io/juxprose/pen/vERQQr
Any ideas? I've tried some z-index experiments as that appears to be the issue, but no luck. The 100% width also seems related to the issue. Any pointers much appreciated, thanks.
Try changing your css to this:
.site-header {
min-height: 100px;
background: blue;
position: fixed;
width: 100%;
z-index: -1;
}
.site-main {
position: relative;
margin: 100px 25px;
z-index:-2;
}
It's working on CodePen - hope it works for you too.
http://codepen.io/juxprose/pen/vERQQr
Please add left and right 10px then it will solve
replace width: 100% with right: 10px and left: 10px
.site-header {
min-height: 100px;
background: blue;
position: fixed;
right: 10px;
left: 10px;
z-index: 10;
}
Example: http://codepen.io/anon/pen/yyKGyJ
Result
I'm using bootstrap's navbar-fixed-bottom to have a sticky navbar at the bottom. This works great. The problem I have is when I use Backbone.Marionette to dynamically add content the navbar no longer sticks to the bottom - rather it just stays in the same spot, hiding some content and eventually the content just goes below it as I add more.
Is there a way to force the navbar to stay stuck to the bottom regardless of how much content is added?
Or simply...
.navbar{
position: fixed;
bottom: 0;
left: 0;
right: 0;
/* the rest of the styling */
}
A lot neater and easier I find. And doesn't matter how tall your navbar is. You can add heights and colours and whatever styling you want after it.
This is an old trick without Bootstrap. Supposed you know the height of the navbar. You can try this: http://jsfiddle.net/e85xw/
.navbar{
height: 2em;
width: 100%;
background: blue;
color: white;
position: fixed;
top: 100%;
margin-top: -2em;
}
If you don't know the height of the navbar, you can use JS for a little help
http://jsfiddle.net/2T282/
<style>
.navbar{
height: 2em;//in case this number is dynamic
width: 100%;
background: blue;
color: white;
position: fixed;
top: 100%;
}
</style>
<script>
$(document).ready(function(){
$('.navbar').css('margin-top',$('.navbar').height() * -1);
});
</script>
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%;
}