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
Related
I'm using this style admin panel. When I make a big form as register page, the footer looks weird. Here is what it looks like. I'm a beginner with css so I hope someone can help me how to make this look right. The footer is supposed to look like the login, like here. I didn't change anything with the standard css. Here's my code:
<div class="login-overlay">
<div class="logo">
Log IP <br> <span class="smaller">test</span>
</div>
<div class="form-container shadow">
<div class="icon">
#yield('icon')
<div class="header">
#yield('name')
</div>
</div>
<div class="inputs">
#yield('login-content')
</div>
</div>
</div>
<footer class="mdl-mini-footer login-footer">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">©Material Dashboard Theme</div>
</ul>
</div>
<div class="mdl-mini-footer__right-section">
<div class="mdl-logo">Terms and Conditions Apply</div>
</ul>
</div>
</footer>
When I inspect the footer, this it what it says:
.login-footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 10px 30px;
background-color: white;
box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.1);
}
It also says more CSS but I guess this is the most important part. What is the best way to fix this?
Your question was somewhat unclear to me, If your problem just is that you think the footer is too tall, you should try the css max-width property like this:
.footer {
max-width:120px;
}
If you want a footer that sticks to the bottom you should check out Ryan Fait's CSS Sticky Footer. The code is very simple and it will force the footer to always stay at the bottom.
You wrap the footer in a .wrapper and use this css code:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
No matter what your problem is, you should really get rid of those </ul>-elements as some people commented.
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;
}
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 am trying to achieve a a horizontal scrolling website with a fixed header and footer.
Goals:
1. Fixed Header and Footer
2. No vertical scrolling
3. Content div fills all space between the header and footer
I used position: absolute on the content to make sure the height:100% takes up the area between the header and the footer. (my third goal)
However this also causes a vertical scrollbar to appear.
live demo:
http://jsfiddle.net/wQ2XR/230/
how can i achieve my goals without a vertical scrollbar to appear?
thanks a lot in advance!
The html code:
<div id="total">
<header id="1">
<div id="a">
<h1>Header</h1>
</div>
</header>
<div id="2">
<div id="b">
<div id="bb">
<h2>Post Title Example One</h2>
<p>hello world! Have you thoroughly searched for an answer before asking your question? </p>
</div>
</div>
</div>
<footer id="3">
<div id="c">
<h1>footer</h1>
</div>
</footer>
</div>
the css:
body, html {
height: 100%;
padding: 0;
margin: 0;
}
body {
width: 100%;
}
header {
}
#a {
position: fixed;
height: 50px;
top: 0;
width: 100%;
background-color: blue;
}
#2 {
position: relative;
padding: 50px 0 25px 0;
}
#b {
height: 100%;
position: absolute;
}
#bb {
position: relative;
height: 100%;
margin: 50px 0 0 0;
width: 2000px;
background-color: yellow;
}
footer {
}
#c {
position: fixed;
height: 25px;
bottom: 0;
width: 100%;
background-color: green;
}
Hmmm, the problem is that the wrapper(s) around your content between the header and footer are taking on the height of the viewport with height:100%. So, when you apply a margin to vertically offset those content wrappers (so that the header becomes visible), they get pushed by that much below the viewport (50px, height of the header). As a result, you get a vertical scrollbar, since the content wrappers are both the full height of the viewport and pushed down - so they can't fit on-screen.
How to avoid this? Well, if your footer and header height won't be dynamic (ie. You'll always be in control of how tall they are through your CSS), you can achieve this in a fairly straightforward manner with position:absolute.
Your structure I modified slightly; I removed the #2 and #b elements, since it looks like they were just there to properly position/size #bb, the actual content-containing element:
<div id="total">
<header id="1">
<div id="a">
<h1>Header</h1>
</div>
</header>
<div id="bb">
<h2>Post Title Example One</h2>
<p>hello world! Have you thoroughly searched for an answer before asking your question?</p>
</div>
<footer id="3">
<div id="c">
<h1>footer</h1>
</div>
</footer>
</div>
Now, with your CSS, I removed the definitions for styling #2 and #b. Additionally, I modified the #bb CSS to read as:
#bb {
position: absolute;
top: 50px;
bottom: 25px;
width: 2000px;
background-color: yellow;
}
Here's an updated JSFiddle to demonstrate what this achieves. Additionally, here's a JSFiddle implementing your multiple-row layout which you gave as a comment in one of the answers.
The reason why overflow:hidden doesn't quite work is because #bb would actually still extend below the viewport - just, no vertical scrollbar would be created because that overflowing region is ignored by the browser. However, when you use a percentage height, it becomes apparent that the height of #bb is not that which is visible. Anyways, hope this helps out! If this isn't what you were looking for, let me know and I'll be happy to help further. Good luck!
To hide the scrollbar use:
overflow: hidden;
However, the text needs to go somewhere (otherwise it will be hidden), so you need to have the container larger or use text-columns.
Do you intend to achieve something like Windows 8 Metro UI for the scrolling?
I am having trouble getting my background image to span the entirety of my content.
I looked at other questions and it seems that I need to set a min-width of 100% on each container... but I tried every combination and it still wasn't working.
Here is my HTML:
<body>
<div id="container">
<div id="header">
header content...
</div>
<div id="content">
<div id="myAccountArea" class="section">
accountArea content...
</div>
<div id="myPostsArea" class="section">
postsArea content...
</div>
</div>
<div id="footer">
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
height:100%
}
body {
background: red;
}
#container {
padding-top: 80px;
margin-left: auto;
margin-right: auto;
width: 1000px;
min-width: 1000px;
}
#content {
min-width:1000px;
}
The problem I am having is that the postsArea content usually spans more than the browser's window, but the background does not.
Thanks
EDIT
Ok, so I narrowed it down to a reset.css file... Any tips on going about discovering the problem in that file?
Thanks.
Ok, so after looking at the reset stylesheet, I discovered this:
html {
background:#FFF
}
Commented this line out and everything seems to be fine :)
Thanks a lot for all the help