My footer will not stick to the bottom of the page in the latest Firefox, while it works in Chrome and IE11. From what I can tell the min-height:100% for the wrapper has no effect in Firefox.
HTML
<div id = "wrapper">
<div id = "content">
</div>
<div id = "push">
</div>
</div>
<div id = "footer"></div>
CSS
#wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -235px;
}
#push{
height:235px;
}
#footer{
position:relative;
height:235px;
width:100%;
}
It's hard to say by the posted code but according to CSS level 2 spec:
10.7 Minimum and maximum heights: 'min-height' and 'max-height'
The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the percentage
value is treated as '0' (for 'min-height') or 'none' (for
'max-height').
Hence you should make sure that the parent of #wrapper has an explicit height. If the #wrapper is located in <body>, try specifying height: 100% on <body> and <html> elements as well:
html, body {
height: 100%;
}
Because a percentage value for height property is relative to the height of the generated box's containing block as well, in this case the <html>. Otherwise the value computes to auto.
In addition, using height: auto !important; and height: 100%; together doesn't make sense and they're pointless; So it's better to remove them.
#wrapper{
min-height: 100%;
margin: 0 auto -235px;
}
Finally if it didn't work, you could give the following approach a try:
Position footer at bottom of page having fixed header
Let's simplify what you have a little.
Your #push can be replaced with the pseudo element :after on your wrapper.
Remove the height on the wrap and avoid !important.
html,body needs to have a height of 100% in order for other elements to have percentage heights
Have an example!
HTML
<div class="wrap">
<!-- main content -->
</div>
<footer class="footer"></footer>
CSS
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.wrap {
min-height: 100%;
margin-bottom: -235px;
}
.wrap:after {
content: "";
display: block;
}
.footer, .wrap:after {
height: 235px;
}
.footer {
background: #F00;
}
If you are trying to have your your footer stick to the bottom, use:
#footer{
position:fixed;
bottom:0;
height:235px;
width:100%;
}
I just tried it with your code and verified that it works on the latest firefox.
I have basic coding experience. In my Wordpress install, some of my pages have a blank white space under the footer that I would like to remove. I have tried several solutions but to no avail. The problem is persistent on chrome, Firefox, IE etc.
I'm not really sure of the cause, but the size of the white space changes depending on computer/browser/resolution.
As I am working in Wordpress I have access to custom CSS and source theme files, however, I would prefer to solve this problem with custom CSS.
I would like a footer that sticks to the bottom of the browser window with no whitespace below it.
Q. Please provide me with code/solution that will remove the white spaces below the footer on my website (preferably custom CSS method).
You can find an example of the white space on my website here. (try viewing on a browser resolution higher than 1280x800)
Solutions i've tried:
#footer {overflow: hidden;} didn't work
Putting html, body, parentDiv, childDiv, section, footer { height : 100%; } in my css but that didn't work
#copyright { padding-bottom: 20px;} "#copyright" is under the footer so this did reduce the whitespace to a point where it seemed it weren't present, but on taller browser windows the white space reappeared.
You have whitespace under the footer because the content is not sufficient to push it past the bottom of the monitor at higher resolutions.
I'd recommend using the Sticky Footer to handle this. It allows the minimum height of the body to be that of the browser, regardless of how little content is in the page.
The sticky footer solution requires some specific HTML to be included, and some basic CSS. Here's a Fiddle of Ryan Fiat's sticky footer in action using the code from his example.
The code goes like this:
HTML:
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Footer content here</p>
</div>
</body>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
background-color:#eaeaea;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
border:solid 1px red;
}
.footer, .push {
height: 155px; /* '.push' must be the same height as 'footer' */
}
.footer {
border:solid 1px blue;
}
Looking at your markup, you can use your existing div class="clear"></div> as your .push div, then you only need to add the div class="wrapper"> around your content.
Try something like this
html {
height: 100%;
}
body {
height: 100%;
flex-direction: column;
min-height: 100vh;
display: flex;
}
footer {
flex-shrink: 0;
}
.futovac {
flex: 1;
}
<html>
<body>
<main></main>
<div class="futovac"></div>
<footer></footer>
</body>
</html>
DEMO: https://help.podio.com/hc/en-us
find you code on .footer you code will be like this,
.footer-top-content .widget_links ul li a {
border-bottom: 1px #4C4C4C solid;
background: #333;
color:#999;
replace this code with this one,
.footer-top-content .widget_links ul li a {
border-bottom: 1px #4C4C4C solid;
background: #333;
color:#999 !important;
overflow: hidden;
this helped mine. hope for you too guys..
I have a document structure that maintains the header at the top of the page and the footer at the bottom. It's working well as long as the content in the middle is less than the height of the window. If the content is too long, the footer gets pushed further down the page and a full body scrollbar is displayed.
How can I get the scrollbar to be limited to the content DIV.
Note that the content of the header and footer are not fixed so I don't know the height of those elements and can't set the top position of the content element as a fixed value. I've added a show/hide feature in the example to demonstrate this.
I'm trying to resolve this in pure CSS (avoiding Javascript). I know that using javascript, I could monitor changes to window size and element visibility, I could calculate the height of the header and footer and set fixed dimensions to the content element. But is there a non-javascript solution?
http://jsfiddle.net/sA5fD/1/
html { height: 100%; }
body {
padding:0 0;
margin:0 0;
height: 100%;
}
#main {
display:table;
height:100%;
width:100%;
}
#header, #footer {
display:table-row;
background:#88f;
}
#more {
display: none;
}
#content {
display:table-row;
height:100%;
background:#8f8;
}
It should work for all modern browsers, desktop, tablets and mobiles. For old browsers, a full body scrollbar would be ok.
If you add two wrap blocks:
<div id="content">
<div id="content-scroll-wrap">
<div id="content-scroll">
content...
Then use CSS:
#content-scroll-wrap {
position: relative;
height: 100%;
}
#content-scroll {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
overflow: auto;
}
http://jsfiddle.net/sA5fD/8/
Don't know about support in old browsers. IEs might need some fixes.
For future visitors:
HTML
<div class="parent">
<div class="child">
<div class="large-element> </div>
</div>
</div>
CSS
.parent {
height: 1000px
overflow-y: scroll;
}
.child {
background-color: royalblue;
height: auto;
}
.large-element {
height: 1200px;
}
In this scenario, the child element will create an overflow. Since the child's height is set to auto, it will stretch out to fill the container. If you had set it to 100%, it would only go 1000px, leaving some white space beneath!
Here is a pen: https://codepen.io/meteora/pen/JJYoZM
This should work in all browsers :)
I'm trying to force my content div to fill the whole wrapper div.
The wrapper is set up to force my footer to the bottom of the window, or page. Which it does just fine.
If I use:
min-height: 500px (or 40em); the content div stretches as requested.
However, if I use:
min-height: 100% (or any other %); nothing happens to the content div.
This makes no sense to me. What am I missing?
Per the request (excluding borders and colors and stuff):
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
width: 80%;
margin: 0 auto -4em;
}
#content {
min-height: 100%; // nothing happens, change to em or px something happens.
}
#sidebar {
float: right;
}
#footer {
clear: both;
height: 4em;
}
#push {
height: 4em;
}
<body>
<div wrapper>
<div header>
<div menu></div>
</div>
<div sidebar></div>
<div content></div>
<div push></div>
</div>
<div footer></div>
</body>
You can try using "line-height: 100%" on your content div. Although... if there is an explicit height set on your wrapper div, you should be able to use 100% on one of the various height measurements to force it to expand.
Post some quick example markup that shows your wrapper and your content.
In the markup shown below, I'm trying to get the content div to stretch all the way to the bottom of the page but it's only stretching if there's content to display. The reason I want to do this is so the vertical border still appears down the page even if there isn't any content to display.
Here is my DEMO:
body {
font-family: Trebuchet MS, Verdana, MS Sans Serif;
font-size:0.9em;
margin:0;
padding:0;
}
div#header {
width: 100%;
height: 100px;
}
#header a {
background-position: 100px 30px;
background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
height: 80px;
display: block;
}
#header, #menuwrapper {
background-repeat: repeat;
background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
height:25px;
}
div#menuwrapper {
width:100%
}
#menu, #content {
width:1024px;
margin: 0 auto;
}
div#menu {
height: 25px;
background-color:#50657a;
}
<form id="form1">
<div id="header">
<a title="Home" href="index.html" />
</div>
<div id="menuwrapper">
<div id="menu">
</div>
</div>
<div id="content">
</div>
</form>
Your problem is not that the div is not at 100% height, but that the container around it is not.This will help in the browser I suspect you are using:
html,body { height:100%; }
You may need to adjust padding and margins as well, but this will get you 90% of the way there.If you need to make it work with all browsers you will have to mess around with it a bit.
This site has some excellent examples:
http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html
I also recommend going to http://quirksmode.org/
I'll try to answer the question directly in the title, rather than being hell-bent on sticking a footer to the bottom of the page.
Make div extend to the bottom of the page if there's not enough content to fill the available vertical browser viewport:
Demo at (drag the frame handle to see effect) : http://jsfiddle.net/NN7ky
(upside: clean, simple. downside: requires flexbox - http://caniuse.com/flexbox)
HTML:
<body>
<div class=div1>
div1<br>
div1<br>
div1<br>
</div>
<div class=div2>
div2<br>
div2<br>
div2<br>
</div>
</body>
CSS:
* { padding: 0; margin: 0; }
html, body {
height: 100%;
display: flex;
flex-direction: column;
}
body > * {
flex-shrink: 0;
}
.div1 { background-color: yellow; }
.div2 {
background-color: orange;
flex-grow: 1;
}
ta-da - or i'm just too sleepy
Try playing around with the following css rule:
#content {
min-height: 600px;
height: auto !important;
height: 600px;
}
Change the height to suit your page. height is mentioned twice for cross browser compatibility.
you can kinda hack it with the min-height declaration
<div style="min-height: 100%">stuff</div>
You can use the "vh" length unit for the min-height property of the element itself and its parents. It's supported since IE9:
<body class="full-height">
<form id="form1">
<div id="header">
<a title="Home" href="index.html" />
</div>
<div id="menuwrapper">
<div id="menu">
</div>
</div>
<div id="content" class="full-height">
</div>
</body>
CSS:
.full-height {
min-height: 100vh;
box-sizing: border-box;
}
While it isn't as elegant as pure CSS, a small bit of javascript can help accomplish this:
<html>
<head>
<style type='text/css'>
div {
border: 1px solid #000000;
}
</style>
<script type='text/javascript'>
function expandToWindow(element) {
var margin = 10;
if (element.style.height < window.innerHeight) {
element.style.height = window.innerHeight - (2 * margin)
}
}
</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>
The min-height property is not supported by all browsers. If you need your #content to extend it's height on longer pages the height property will cut it short.
It's a bit of a hack but you could add an empty div with a width of 1px and height of e.g. 1000px inside your #content div. That will force the content to be at least 1000px high and still allow longer content to extend the height when needed
Try Ryan Fait's "Sticky Footer" solution,
http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Works across IE, Firefox, Chrome, Safari and supposedly Opera too, but haven't tested that. It's a great solution. Very easy and reliable to implement.
Try:
html, body {
height: 102%;
}
.wrapper {
position: relative;
height: 100%;
width: 100%;
}
.div {
position: absolute;
top: 0;
bottom: 0;
width: 1000px;
min-height: 100%;
}
Haven't tested it yet...
Sticky footer with fixed height:
HTML scheme:
<body>
<div id="wrap">
</div>
<div id="footer">
</div>
</body>
CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
#footer {
height: 60px;
}
Try http://mystrd.at/modern-clean-css-sticky-footer/
The link above is down, but this link https://stackoverflow.com/a/18066619/1944643 is ok. :D
Demo:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="author" content="http://mystrd.at">
<meta name="robots" content="noindex, nofollow">
<title>James Dean CSS Sticky Footer</title>
<style type="text/css">
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
padding: 25px;
}
footer {
background-color: orange;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<article>
<!-- or <div class="container">, etc. -->
<h1>James Dean CSS Sticky Footer</h1>
<p>Blah blah blah blah</p>
<p>More blah blah blah</p>
</article>
<footer>
<h1>Footer Content</h1>
</footer>
</body>
</html>
I think the issue would be fixed just making the html fill 100% also,
might be body fills the 100% of the html but html doesn't fill 100% of the screen.
Try with:
html, body {
height: 100%;
}
Also you might like this: http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm
It isn't quite what you asked for, but it might also suit your needs.
I dont have the code, but I know I did this once using a combination of height:1000px and margin-bottom: -1000px; Try that.
Depending on how your layout works, you might get away with setting the background on the <html> element, which is always at least the height of the viewport.
It is not possible to accomplish this using only stylesheets (CSS). Some browsers will not accept
height: 100%;
as a higher value than the viewpoint of the browser window.
Javascript is the easiest cross browser solution, though as mentioned, not a clean or beautiful one.
#content {
height: calc(100% - the amount of pixels the content div is away from the top);
}
So if your div is 200px from the top, the code you need would be
#content {
height: calc(100% - 200px);
}
I know this is not the best method, but I couldnt figure it out without messing my header, menu, etc positions. So.... I used a table for those two colums. It was a QUICK fix. No JS needed ;)