I'm trying to create a sample page with fixed header, fixed sidebar, and sticky footer. I would like the page to be responsive as well.
I have a fixed sidebar and I have a right border on it. I would like the border and the sidebar to stop right when the footer begins.
I have a working fiddle: https://jsfiddle.net/DTcHh/15278/
Here is the css I'm using for the sidebar
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background-color: #FFFFFF;
margin-top: 50px;
border-right: 1px solid red
}
You can use z-index so the footer sits on top the sidebar.
CSS
.footer {
z-index:1000;
}
#sidebar-wrapper {
z-index: 10;
}
Here's a working demo.
Use z-index
.footer {
z-index: 1000;
}
Here's a working fork
The simplest way is to make the footer also position: fixed; with a z-indexhigher than the sidebar
Fiddle: https://jsfiddle.net/ue49tzet/
Related
Using Angular I have a horizontal navigation bar that I need to be fixed such that if I am scrolling up and down in the viewport the bar stays fixed at the bottom of the screen.
Here is the CSS code I have for the bottom navigation bar element:
.bottom-bar {
position: fixed;
background-color: white;
overflow: hidden;
z-index: 1;
height: 65px;
top: 90%;
width: 90%;
}
The navigation bar behaves as desired, but I manually have to adjust the top and width properties to get the element to fit perfectly on the page. Of course that doesn't work when the resolution/screen size for the viewer changes and the element doesn't fit perfectly. See below for an example of trying to fit the element onto the page:
Is there a way to change the CSS to make the navigation bar fit perfectly on the page and also stay fixed? I can get the positioning to work fine if I change the position to absolute or sticky, but then it doesn't stay in one place when I scroll up or down on the viewport.
Any help is appreciated, thanks.
Does referencing from bottom work instead of top?
.bottom-bar {
position: fixed;
background-color: white;
overflow: hidden;
z-index: 1;
height: 65px;
bottom: 10px;
width: 90%;
}
This should work:
.bottom-bar{
position: fixed;
background-color: white;
overflow: hidden;
z-index: 1;
height: 65px;
position: fixed;
bottom: 0;
width: 100%; // adjust the percentage if needed
}
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).
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%;
}