I have a live website located here:
my website
The problem is the footer navigation bar does not position all the way at the bottom of the browser as shown here:
There is a bit of blue spacing, which is not what I want to achieve.
I'm using twitter bootstrap, if that helps, but the footer bar div object is called "navbar navbar-default"
If I named the footer div like so:
<div class="navbar navbar-default navbar-fixed">
then, the navbar sticks to the very bottom of the browser window, but it stays fixed, which is not what I want.
Currently, the code is like so:
<div class="navbar navbar-default navbar-fixed">
How can I achieve my goal?
Thanks
EDIT: I apologize guys, my website has the footer fixed, but if the code did not have the footer bar fixed, it will have the spacing. I apologize for the confusion.
I'm not familiar with Twitter Bootstrap, but the spacing is most likely caused by padding or margin somewhere between the body tag, and/or the footer tag and everything inside it. In chrome's code inspector I see calculated margin-bottom of 20px in <div class="navbar...">, and also 60px in <body>.
A quick test is to modify <div class="navbar">:
<footer>
<div class="navbar navbar-default" style="margin: 0;">
See if anything changed. If not:
<body style="margin: 0;">
Tested in Chrome's code inspector and the footer is placed at the bottom without any spacing (and doesn't "stick"), but it's a hack so you should probably find a better way / to follow the bootstrap's logic.
Try this
You can try this
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
This an HTML
Below is the basic structure of the HTML code. You'll notice how the footer sits outside of the wrap .
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
You would place your content elements inside the main . For example, if you were using a 2 column floating layout you might have this;
<div id="wrap">
<div id="main">
<div id="content">
</div>
<div id="side">
</div>
</div>
</div>
<div id="footer">
</div>
A header could be placed inside the wrap but above the main like this;
<div id="wrap">
<div id="header">
</div>
<div id="main">
</div>
</div>
<div id="footer">
</div>
This is the easiest way I've been able to get a header/body/footer to work. Demo
HTML
<div class="wrap">
<div class="header">
</div>
<div class="body">
</div>
</div>
<div class="footer">
</div>
CSS
html, body {
height: 100%;
margin: 0;
}
.header {
height: 100px;
background-color: red;
}
.wrap {
height: 100%;
background-color: green;
margin-bottom: -100px; /* Must be negative height of footer */
}
.footer {
height: 100px;
background-color: blue;
}
Related
I do not know how is that space coming. I do not want fixed footer but only want fixed navbar. My navbar is working fine but footer is having some white space below it.
body {
padding-top: 4.5rem;
min-height:100%;
}
.footer {
position: relative;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
left: 0;
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #000000;
}
This is the CSS for footer. I am using Bootstrap 4.
<body>
<div class="container-fluid">
<nav ..... #code for navbar
</nav>
<div class="row justify-content-center">
<div class="col-6">
<div class="card">
~~~~MY CONTENT~~~
</div>
</div>
</div>
<div class="row">
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer></div>
</div>
</div>
However, when I change the CSS to position:fixed. It works fine but I do not want that. Thank you in advance.
Your content element's height is not the screen's height. Therefore your footer will be like that, you can do it with JavaScript or just put content in your container.
I have implemented this sticky footer for Bootstrap 2.3.2 on my site but am running into an issue on a page that has short content here. There is too much space between the content and the footer, as well as an inconvenient scrollbar. Is there a way to prevent the huge gap in space and the scroll bar on a short page with short content?
I am using this code to generate the sticky footer.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#wrap{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -150px;
}
#push{
height: 150px;
}
#footer{
background-color: #3BC1CD;
height: 150px;
}
Following Bootstrap example, simply move your #push div in the #wrap div :
<div id="wrap">
...
<div id="push"></div>
</div><!-- #wrap -->
<div id="footer">
...
</div>
It's not giving the desired result because the #push div is outside of the wrapper div.
In your html you have :
<div id="wrap"></div>
<div id="push"></div>
<div id="footer"></div>
in bootstrap they have :
<div id="wrap">
<div class="container">
<div id="push"></div>
</div>
<div id="footer"></div>
Just indent the #push inside the #wrap
Remove the height on <div id="push"> or remove it altogether. This is unnecessary.
I'm trying to get a footer which will stick to the bottom of the browser if there's not enough content, or stick to the bottom of the page if there is enough content such that it exceeds the browser's height. Does there exist a
.navbar-static-bottom
class in bootstrap3?
On a separate note, I'm having some issues with styling my footer. I would like links to the left, and some plain text to the right. This jsfiddle is the opposite of what I want. I don't think that pull-right and pull-left is the ideal solution. It seems kinda hacky. I changed button to pull-left and the text to pull right, which only gave the (almost) right look when the window was condensed. The margins are off though.
I accomplish this using a bit a JavaScript:
$(window).bind('load', function () {
resizeElements();
function resizeElements() {
headerHeight = $('.navbar').height();
footerHeight = $('footer').height();
if (($(document.body).height() + footerHeight) < $(window).height()) {
$footer.addClass('navbar-fixed-bottom');
} else {
$footer.removeClass('navbar-fixed-bottom');
}
}
$(window).resize(resizeElements);
});
This allows me to avoid any wrap classes.
you can to use .navbar-fixed-bottom class to if you want the footer to be fixed at bottom.
In case you need a sticky footer you can try this
<div id="wrap">
<div id="main" class="container clear-top">
<div class="row">
<div class="span12">
</div>
</div>
</div>
</div>
<footer class="footer" style="background-color:#c2c2c2">
</footer>
CSS:
html,body
{
height:100%;
}
#wrap
{
min-height: 100%;
}
#main
{
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
footer { position: relative; margin-top: -150px; /* negative value
of footer height */ height: 150px; clear:both; padding-top:20px;
color:#fff; }
Found this here http://bootstrapfooter.codeplex.com/
I used this code works for me:
HTML
<div class="container" id="footer">
<footer>
<div class="row">
<div class="col-lg-12">
© 2013
<br>
Powered by
Bootsrap
·
Fontawesome
</div>
</div>
</footer>
</div>
CSS
#footer{
position:relative;
bottom:0;
background-color:#navbar-inverse-bg;
border-color:#navbar-inverse-border;
color:#navbar-inverse-color;
}
Firstly, apologies for what appears to be a very common question, looking at the amount of similar questions, you are forgiven for being annoyed at yet another, but regardless of all the others that I have read (and tried to implement), and many other links found on Google, I'm still struggling to solve my problem, so I'm sorry, but here goes..
The footer I have is fine when the main content is longer than the browser window, but when there is very little content, rather than sticking to the bottom of the browser window, it sticks to the bottom of the main content, leaving a horrible blank space below the footer.
I've created a simple(ish) fiddle HERE using a stripped down version of my code.. here is the code for those that are able to see the issue without "fiddling"..
<body>
<!-- Header -->
<div id="header-wrapper">
<header class="5grid-layout" id="site-header">
<div class="row">
<div class="12u">
<div id="logo">
<h1 class="mobileUI-site-name">HEADER</h1>
</div>
</div>
</div>
</header>
</div>
<!-- Main -->
<div id="main-wrapper" class="subpage">
<div class="5grid-layout">
<div class="row">
<div class="12u">MAIN CONTENT </div>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer-wrapper">
<footer class="5grid-layout" id="site-footer">
<div class="row">
<div class="12u">PROBLEM FOOTER</div>
</div>
</footer>
</div>
</body>
and here is the css..
#header-wrapper {
background: #12ff00;
height: 110px;
position: relative;
padding: 0.0em 0 1em 0;
}
#main-wrapper {
border-top: 3px solid #662d91;
border-bottom: 3px solid #662d91;
background: #ff5a00;
position: relative;
padding: 1em 0 2em 0;
}
#footer-wrapper {
background: #ff00fc;
position: relative;
padding: 1em 0 1em 0;
height: 100px;
}
Granted, a lot of the above Divs aren't needed for the sake of this demo, but I have left them in just in case it is one of these thats causing the problem. I'm still new to this, so I honestly have no idea.
so basically, how on earth do I get that footer to behave, previous attempts based on other Stack Overflow answers have left me with either no footer, or a footer that sits in the center of the screen regardless of whether there is a lot or little content.
Any help will be gratefully received.
I have answered this question before
Click Here
Or see this JSFiddle for a working example of a sticky footer.
HTML
<div class="wrapper">
<div class="header"></div>
</div>
<div class="footer"></div>
CSS
* {margin: 0;}
html, body {height: 100%;}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px; /* the bottom margin is the negative value of the footer's height */}
.footer { height: 200px;background-color:#000;}
The idea is that the bottom margin is the negative value of the footers height
Have you tried:
html, body {
height: 100%;
min-height: 100%;
}
#main-wrapper {
height:100%;
}
Here's a working DEMO1
UPDATES:
I've changed a few things in your code, but now its working!
Here are the changes:
added a #container for the header and main divs.
I've changed the footer padding from em to px, because I need precise height.
I gave the main-wrapper's background to #container
and the border-bottom to footer as border-top
DEMO2
The way I ussualy do this is using
http://www.cssstickyfooter.com/using-sticky-footer-code.html
If you can, try to stick close to that, it has compatibility with older browsers.
I didn't find better alternatives to this and is well explained
I was working with sticky footer, but it wasn't working out as it should and was giving something like 200 or 400 px of extension past the viewport.
I thought it would be easier to show what I need rather than explain it, see below:
EDIT: I updated my code to reflect what it looks like with sticky footer.
Sticky Footer jsFiddle
ORIGINAL
And here is my code:
<div id="wrapper">
<header>
Header
</header>
<div id="container">
<div id="content">
Content
</div>
<div id="sidebar">
Sidebar
</div>
</div>
<footer>
Footer
</footer>
</div>
Also noticed that I have a sidebar in the code but not in the picture provided. I will need a sidebar as well without a background.
You did not follow the tutorial or I'd see an empty div with class push in your wrapper. Also, footer should not be inside your wrapper.
As per the online tutorial...
<body>
<div class="wrapper">
<header>
Header
</header>
<div id="container">
<div id="content">
Content
</div>
<div id="sidebar">
Sidebar
</div>
</div>
<div class="push"></div>
</div>
<footer>
<p>Copyright (c) 2008</p>
</footer>
</body>
The CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
height: 142px; /* .push must be the same height as footer */
}
jsFiddle Demo Page
Please try the above and post your actual CSS.
Try this method to anchor the footer at the bottom.
.footer {
width:100%;
position:fixed;
bottom:0;
height:30px;
}