I have a problem with my body element. It seems that it is filling 100% percent of the screen. However, if you drag the browser small and then scroll down - the body doesn't extend.
Please see this jsFiddle as a prime example.
height: 100%; is the height of the window your site is displayed in not the height of the website, which causes the background getting purple when srolling down.
Just add this:
html { background: green; }
And remove the
body { background: green; }
to get the background to always be green. (JSFiddle)
I believe that THIS FIDDLE answers the question. I have been using this in production and it has been working great.
HTML:
<html>
<body>
<div class="main-wrapper contain">
<section class="main-content">
Main Content
</section> <!-- end .main-wrapper -->
<div class="other-thing">
Other thing for example.
</div>
</div> <!-- .main-wrapper -->
</body>
</html>
CSS:
/* hard reset */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
padding: 0; margin: 0;
}
/* micro clear fix (clears floats) */
.contain:before,
.contain:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.contain:after {
clear: both;
}
.contain {
*zoom: 1;
}
html {
height: 100%; /* 01 */
/* tells html to go ahead and feel free to be 100% height */
}
body {
min-height: 100%; /* 02 */
/* expands to push html to the limit */
}
.main-wrapper {
/* overflow: hidden; */
/* in this case - forces wrapper to contain content (like a clear-fix) */
/* use clear fix instead */
}
/* if you see yellow - we are failing */
.main-content {
width: 100%;
float: left;
}
.other-thing {
width: 100%;
float: left;
}
I've tested this - and it seems to work in every situation, assuming that you keep all of your containers and stuff actually containing properly. There must be downfalls to this overflow: hidden; or people wouldn't use clear-fix. So - I would love hear more input.
Alternatively, I think that the html and body can be 100% and then the .main-wrapper can be min-height: 100%; and that works as well. Basically - something needs to force all of its containers to stretch. and in order to do that, all of those containers must be set to 100% so that they remember that they have that ability. Or am I anthropomorphizing the divs too much...
UPDATE 2021:
The nature of the web is to allow the content to define the 'shape' or the 'space' or whatever you want to call it... so - the body doesn't really know how 'tall' it is. It knows it's 100% width, because it's a block level element. So, unless you tell the HTML to be height: 100%, and then every child... then they wouldn't really know what "100%" really meant. 100% of what? For dashboard apps and desktop full-screen layouts you may want to set the hight (but not in most cases) - and using 100vh units is available now. General rule: just let the content decide the size of it's parent element and work with the nature of The Web. (ignore all that code up there! It's 2021: flex-box + grid! : )
Just remove the height: 100%; from your <body> and and also remove the height: 300px; from your <figure> and you are ready to go.
You can also use this code: http://jsfiddle.net/Asustaba/LBu8z/8/
1) If you want to have the body fill the whole screen, while solving 2 things simultaneously (due to the body having dynamic content)
not enough content: the body is at least as tall as the viewport, since your body doesn't have enough content to fill the screen
too much content: the body should be as tall as the html
Now you can use min-height:100vh for that, which means 100% of the viewport's height:
http://jsfiddle.net/LBu8z/89/
Except the Opera Mini it is supported by all browsers: caniuse.com/#search=vh
2) if you want to have a fixed background image, then I suggest to stretch a fixed position body:after
I needed this solution in production since a background-sizing:cover won't work properly with a fixed backround, thus I had to make the body:after fixed and the background image not fixed. You can check it here: https://www.doklist.com/
body:after{
content:"";
background:green;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
z-index:-1;
}
3) If you want to do it with only the body, then: stretch a fixed body with overflow scroll. But be aware it may interfere with some elements (eg. bootstrap tooltips and popovers)
body {
background: green;
overflow-y:scroll;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
}
Related
I'm using a Boostrap sample to create a sticky footer for a web site using CSS, this all works fine the footer remains in place at the bottom of the page as the page is resized.
On a number of pages I have content that needs to be shown practically full page, barring the footer. The content section of the page therefore needs to be set to 100% height so its content in turn can be sized to full height.
Here's a JSFiddle that demonstrates the problem.
How can we make the green container div full height, so it touches the page top at the top and the top of the footer at the bottom?
Thanks!
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">This is the sticky footer template taken from the Bootstrap web site.</p>
<p class="lead">How can we make this green .container div the full height of its parent #wrap div?</p>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container"></div>
</div>
#wrap .container {
background-color: lightgreen;
}
/* Sticky footer styles */
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push, #footer {
height: 60px;
}
#footer {
background-color: #f5f5f5;
}
I have the solution to your problem. I moved it from JSFiddle to codepen, because I like codepen better. No other reason.
http://cdpn.io/IJHxf
This is essentially where I got the answer from, and they explain it way better than I ever could.
http://v1.reinspire.net/blog/2005/10/11/css_vertical_stretch/
When you implement that answer though, what I found height: auto !important; is the culprit as to why it doesn't immediately work. Comment it out in your #wrap id to see it take full effect. The code pen has additional changes to really see what is going on. What you really need to make your original question work is
#wrap .container {
background-color: lightgreen;
min-height: 100%;
height: auto; /* this line takes care of "more than enough content problem" */
}
html, body {
height: 100%;
background-color: #dedede;
padding: 0;
margin: 0;
}
#wrap {
min-height: 100%;
/* height: auto !important; */
height: 100%;
margin: 0 auto -60px;
}
Actually, what you could do, and would make more sense is instead of commenting out the entire line height: auto !important; You could just take off the !imporant. For example
#wrap {
height: auto !important;
/* changed to */
height: auto;
}
I changed some colors around to make it more apparent what was really happening. You'll see that in the codepen. There are lots more comments in the code pen to see what I really did FYI.
Also, I found that your sticky footer gave my page a scroll bar because of the margin. For me, I got rid of the scroll bar with the code below.
margin: 0 auto -60px;
/* changed to */
margin: 0 auto -80px;
I wish the two sections of my design (see attached image) to extend the whole height of the page. I have tried to create a Fiddle but it just won't work in there, so I've put up a link here to demo what I mean.
I have set the height of the div that holds the results to 100%. However, it doesn't stretch right down to the fixed footer.
#found-results {
height: 100%px;
margin-bottom: 50px;
background: #CCC;
}
I also want the green box to stretch down to the footer. The CSS is:
.main {
width: 606px;
float: left;
padding: 15px 0 0 16px;
position: absolute;
background: green;
margin-left: 383px;
}
Now, if I add height: 100%; to it, it seems to work, but if one of the tabs contains a lot of text, it doesn't stretch far enough.
Any help will be much appreciated.
Equal-height columns
In a way, the tricky part isn't the fixed header and footer, or the 100% height; the tricky part is the equal-height columns. Often, it's better to fake equal-height columns (e.g., adding a grey-green background image to the parent container). Doing so typically allows the code to be simpler, more flexible, and more stable, compared to true equal-height columns. If the layout for this website proves too unwieldy, try faking the equal-height columns instead (as shown in this demo), and see if that helps the layout to become more manageable.
With that being said, the basic options for true equal-height columns are as follows:
HTML tables
CSS tables
CSS3 flexbox
CSS3 grids
JavaScript or jQuery
Here's a JSFiddle demo with true equal-height columns using CSS tables. The left column has very-tall content, and the right column has short content. The demo tested fine in IE10, Firefox, Chrome, Safari, and Opera; however, this may only work for relatively-simple layouts.
Here's a similar demo using HTML tables, in case support for IE8 is needed.
Faking the equal-height columns
Here's another demo that fakes the equal-height columns by adding a 2-color background image. This demo also tested fine in IE10, Firefox, Chrome, Safari, and Opera; however, unlike the previous ones, it's much more likely to support complex page layouts.
HTML
<div id="header">...</div>
<div id="content" class="clearfix">
<div class="column1">...</div>
<div class="column2">...</div>
</div>
<div id="footer">...</div>
CSS
html, body {
height: 100%;
...
}
#header {
position: fixed;
top: 0;
height: 120px;
...
}
#footer {
position: fixed;
bottom: 0;
height: 60px;
...
}
#content {
min-height: 100%;
padding: 120px 0 60px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(some-two-color-background.png) repeat-y 53.6% top;
...
}
#content .column1 {
float: left;
width: 250px;
}
#content .column2 {
float: left;
width: 350px;
}
Note: The apparent column widths for the background image are controlled by setting the background-position property. This allows two columns of any explicit width (px or %) to be faked using the same generic background image. Alternately, a custom background image with the exact column sizes could be used, to simplify the CSS.
I think you are after something like this? jsFiddle
I have made it a bit easier for myself by only copying the markup I needed from your website, the class's, id's and the elements used are exactly the same as on your website, that should make it fairly easy for you to implement this solution on your website.
This layout will always at least fill the whole screen, and both sections will be the same height and touch the fixed footer. When the content is to high for one of the sections, a scroll bar will appear and you can scroll down until you have reached the bottom of both sections. Both sections will always be the same height. I have added some buttons in the header which will add and remove content inside the columns, this makes it easy to see what happens when the content is taller than than the height of the document.
Edit
I realised you probably want your header to be fixed as well (as this seems to be the case on your current website), here's a version with a fixed header. jsFiddle.
Edit2
I have added some buttons to the fiddles to make it easier to see what happens when the content inside the columns is forcing the columns to be taller than than the height of the document.
HTML
<header></header>
<div id="container">
<section class="results"></section>
<section class="main"></section>
</div>
<footer></footer>
CSS
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
header {
position: fixed;
top: 0px;
height: 60px;
width: 100%;
background-color: #FFF;
}
#container {
height: 100%;
overflow:auto;
padding-top: 60px;
padding-bottom: 60px;
display: table;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
footer {
position: fixed;
bottom: 0px;
height: 60px;
background-color: #333333;
width: 100%;
}
.main {
display: table-cell;
background-color: #008000;
}
.results {
display: table-cell;
background-color: #EFEFEF;
width: 383px;
}
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
I think your problem sits here: #found-results { height: 100%px; ...
...and further I think you have to add this too:
html, body {height: 100%}
you can set the height with jquery according to height of sidebar after loading page
$(document).ready(function(){
$('#main').height($('#sidebar').height());
});
You can use Jquery to achieve this.
$(document).ready(function() {
var window_height = $(window).height();
var footer_h = $("#footer").height();
var container_height = window_height - footer_h ;
$("#container").hide();
$("#container").css('min-height', container_height + "px");
$("#container").show();
});
Out of curiosity, considering the example below, why does having the margin on the #container div cause a vertical scrollbar to appear in the browser? The container is much smaller in height than the body height which is set to 100%.
I have set the padding and margins to 0 for all elements except the #container. Note that I have deliberately omitted absolute positioning on the #container div. In this case how is the browser calculating the height of the body and how is the margin affecting it?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { padding:0; margin:0;}
html, body { height:100%; }
#container
{
padding:10px;
margin:50px;
border:1px solid black;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div id='container'>
</div>
</body>
</html>
Example also on JSFiddle
If you paint the backgrounds of html and body (giving each its own color), you'll quickly notice that body is being shifted down along with #container, and #container itself isn't offset from the top of body at all. This is a side effect of margin collapse, which I cover in detail here (although that answer describes a slightly different setup).
It's this behavior that's causing the scrollbar to appear, since you've declared body to have 100% the height of html. Note that the actual height of body is unaffected, as margins are never included in height calculations.
Based upon #BoltClock♦'s answer, I fixed it by zeroing the margin...
so
html,body, #st-full-pg {
height: 100%;
margin: 0;
}
works where id "st-full-pg" is assigned to a panel div (which further contained panel-heading and panel-body)
A bit late, but maybe it helps someone.
Adding float: left; to #container removes the scrollbar, as W3C says:
•Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
html,body {
height: 100%;
margin: 0;
overflow: hidden;
}
This worked for me
adding float:left; is nice, but will interfere with central horizontal positioning using margin:auto;
if you know how big your margin is, you can account for that in your height percentage using calc:
height: calc(100% - 50px);
browser support is good, but only IE11+
https://caniuse.com/#feat=calc
/*removes default margin & padding*/
html, body{
padding: 0px !important;
margin: 0px !important;
}
/*sets body height to max; and allows scrollbar as page content grows*/
body{
min-height: 100vh;
}
I have found a solution: add padding: 1px 0; to body prevents vertical scrollbars to appear
For those who are coming here for an easier to understand answer that even includes code samples, this answer (copied from here) is for you.
No JavaScript or definite pixel values (such as 100px) are required, just, pure CSS and percentages.
If your div is just sitting there on its own, height: 50% will mean 50% the height of the body. Normally, the height of the body is zero without any visible content, so 50% of that is just, well, zero.
This is the solution (based on this) (uncomment the background lines to get a visualisation of the padding):
/* Makes <html> take up the full page without requiring content to stretch it to that height. */
html
{
height: 100%;
/* background: green; */
}
body
{
/*
100% the height of <html> minus 1 multiple of the total extra height from the padding of <html>.
This prevents an unnecessary vertical scrollbar from appearing.
*/
height: calc(100% - 1em);
/* background: blue; */
}
/* In most cases it's better to use stylesheets instead of inline-CSS. */
div
{
width: 50%;
height: 50%;
background: red;
}
<div></div>
The above was written so that there would still be the usual padding. You could set the dimensions of the red div to 100% and still see padding on each side/end. If you don't want this padding, use this (although it doesn't look nice, I recommend you stick with the first example):
/* Makes <html> take up the full page without requiring content to stretch it to that height. */
html, body
{
height: 100%;
}
/* You can uncomment it but you wouldn't be able to see it anyway. */
/*
html
{
background: green;
}
*/
body
{
margin: 0;
/* background: blue; */
}
/* In most cases it's better to use stylesheets instead of inline-CSS */
div
{
width: 50%;
height: 50%;
background: red;
}
<div></div>
I saw this problem fixed before where you put all the contents of body in a div called wrap. Wrap's style should be set to position: relative; min-height: 100%;. To position #container div 50px from the top and left put a div inside wrap with a padding set to 50px. Margins will not work with wrap and the div we just made, but they will work in #container and everything inside it.
here's my fix on jsfiddle.
you can add non-breaking space into the body tag.
<body> <othertags>...</body>
html, body {
height: 100%;
overflow: hidden;
}
If you want to remove the body scrolling add the following style:
body {
height: 100%;
overflow: hidden;
}
Inspired by #BoltClock, I tried this and it worked, even when zoom out and in.
Browser: Chrome 51
html{
height: 100%;
}
body{
height: 100%;
margin: 0px;
position: relative;
top: -20px;
}
I guess body was shifted down 20px.
It works for me:
html,
body {
height: 100%;
height: -webkit-fill-available; // Chrome
}
// Firefox
#-moz-document url-prefix() {
body {
box-sizing: border-box;
margin: 0;
padding: 1px;
}
}
Add overflow: hidden; to html and body.
html, body {
height: 100%;
overflow: hidden;
}
I found a quick solution: try set height to 99.99% instead of 100%
Sorry but I can't get this to work. Should be a quick answer.
My html is laid out like so:
<html>
<header>
...
</header>
<body>
<div class = "background"></div>
<div class = "content">
...
</div>
<body>
</html>
The I want the background div to simply place a 1000px background colour down the entire length of the page. The content is then padded 40px on each side, inside this background colour.
The css is like so:
body {
width:1000px;
margin-left:auto;
margin-right:auto;
}
.background {
position:absolute;
top:0px;
width:1000px;
height:100%;
}
.content {
min-height:100%;
padding-left:40px;
padding-right:40px;
}
I thought it worked like so... The body div would expand to hold the min-height of the .content div. This means that 100% height of the .background div would fill the entire body and so the length of the page. However it does not. It only fills the window height. Where am I going wrong?
Thanks
As topek guessed, this will do it:
html, body{
height:100%
}
The reason this works is because percentage CSS heights only work if the parent element has a height defined on it. By adding the above, you're giving .background's parents a height.
Update: based on OP's comment, here's how you would get the .background div to always appear to fill the viewport:
html, body {
height: 100%;
padding: 0;
margin: 0;
}
/* Fixed element that takes up entire viewport */
.background {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Content that stacks above .background */
.content {
position: relative;
z-index: 2;
}
As .content grows larger than the viewport and the user scrolls, the fixed position of .background will keep it always in view.
And of course, a handy example.
All you need is:
body, html {
height:100%
}
Then specify height:100%; any DIV you want to have full height.
BTW - 1000px wide is a bad unit to use. People with 1024 wide screens will get horizontal scrollbars. Better to stick to 980 or less. 960 is good because it can be divided by many factors.
I think this is what you're looking for.
http://jsfiddle.net/sg3s/GxRcp/
The key in this little example is the position: fixed; for .background so that it is kept in the screen while scrolling.
If you don't really want to do this and want the background to expand ARROUND the content just make it a normal / relatively positioned element, and wrap it arround .content...
If you give a more acurate description of the layout you're trying to create (and maybe why in such a way) we may be able to help you better.
Btw, in your example html there is an error, header should be head.
You should put bg into html or body elements as the first choices.
html { background: url("bg.jpg") no-repeat top center; }
or
body { background: url("bg.jpg") no-repeat top center; }
Fixed:
background: url("bg.jpg") no-repeat top center fixed; /* And bg will stay in fixed position */
What's the best way to make an element of 100% minimum height across a
wide range of browsers ?
In particular if you have a layout with a header and footer of fixed height,
how do you make the middle content part fill 100% of the space in between with the footer fixed to the bottom ?
I am using the following one: CSS Layout - 100 % height
Min-height
The #container element of this page has a min-height of 100%. That
way, if the content requires more height than the viewport provides,
the height of #content forces #container to become longer as well.
Possible columns in #content can then be visualised with a background
image on #container; divs are not table cells, and you don't need (or
want) the physical elements to create such a visual effect. If you're
not yet convinced; think wobbly lines and gradients instead of
straight lines and simple color schemes.
Relative positioning
Because #container has a relative position, #footer will always remain
at its bottom; since the min-height mentioned above does not prevent
#container from scaling, this will work even if (or rather especially when) #content forces #container to become longer.
Padding-bottom
Since it is no longer in the normal flow, padding-bottom of #content
now provides the space for the absolute #footer. This padding is
included in the scrolled height by default, so that the footer will
never overlap the above content.
Scale the text size a bit or resize your browser window to test this
layout.
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
h1, h2, a {
color:orange;
}
p {
line-height:1.5;
margin:0 0 1em;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:750px;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
padding:1em;
background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom:6px double gray;
}
div#header p {
font-style:italic;
font-size:1.1em;
margin:0;
}
div#content {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#content p {
text-align:justify;
padding:0 1em;
}
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
border-top:6px double gray;
}
div#footer p {
padding:1em;
margin:0;
}
Works fine for me.
To set a custom height locked to somewhere:
body, html {
height: 100%;
}
#outerbox {
width: 100%;
position: absolute; /* to place it somewhere on the screen */
top: 130px; /* free space at top */
bottom: 0; /* makes it lock to the bottom */
}
#innerbox {
width: 100%;
position: absolute;
min-height: 100% !important; /* browser fill */
height: auto; /*content fill */
}
<div id="outerbox">
<div id="innerbox"></div>
</div>
Here is another solution based on vh, or viewpoint height, for details visit CSS units. It is based on this solution, which uses flex instead.
* {
/* personal preference */
margin: 0;
padding: 0;
}
html {
/* make sure we use up the whole viewport */
width: 100%;
min-height: 100vh;
/* for debugging, a red background lets us see any seams */
background-color: red;
}
body {
/* make sure we use the full width but allow for more height */
width: 100%;
min-height: 100vh; /* this helps with the sticky footer */
}
main {
/* for debugging, a blue background lets us see the content */
background-color: skyblue;
min-height: calc(100vh - 2.5em); /* this leaves space for the sticky footer */
}
footer {
/* for debugging, a gray background lets us see the footer */
background-color: gray;
min-height:2.5em;
}
<main>
<p>This is the content. Resize the viewport vertically to see how the footer behaves.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
</main>
<footer>
<p>This is the footer. Resize the viewport horizontally to see how the height behaves when text wraps.</p>
<p>This is the footer.</p>
</footer>
The units are vw , vh, vmax, vmin. Basically, each unit is equal to 1% of viewport size. So, as the viewport changes, the browser computes that value and adjusts accordingly.
You may find more information here:
Specifically:
1vw (viewport width) = 1% of viewport width
1vh (viewport height) = 1% of viewport height
1vmin (viewport minimum) = 1vw or 1vh, whatever is smallest
1vmax (viewport minimum) = 1vw or 1vh, whatever is largest
kleolb02's answer looks pretty good. another way would be a combination of the sticky footer and the min-height hack
For min-height to work correctly with percentages, while inheriting it's parent node min-height, the trick would be to set the parent node height to 1px and then the child's min-height will work correctly.
Demo page
A pure CSS solution (#content { min-height: 100%; }) will work in a lot of cases, but not in all of them - especially IE6 and IE7.
Unfortunately, you will need to resort to a JavaScript solution in order to get the desired behavior.
This can be done by calculating the desired height for your content <div> and setting it as a CSS property in a function:
function resizeContent() {
var contentDiv = document.getElementById('content');
var headerDiv = document.getElementById('header');
// This may need to be done differently on IE than FF, but you get the idea.
var viewPortHeight = window.innerHeight - headerDiv.clientHeight;
contentDiv.style.height =
Math.max(viewportHeight, contentDiv.clientHeight) + 'px';
}
You can then set this function as a handler for onLoad and onResize events:
<body onload="resizeContent()" onresize="resizeContent()">
. . .
</body>
I agree with Levik as the parent container is set to 100% if you have sidebars and want them to fill the space to meet up with the footer you cannot set them to 100% because they will be 100 percent of the parent height as well which means that the footer ends up getting pushed down when using the clear function.
Think of it this way if your header is say 50px height and your footer is 50px height and the content is just autofitted to the remaining space say 100px for example and the page container is 100% of this value its height will be 200px. Then when you set the sidebar height to 100% it is then 200px even though it is supposed to fit snug in between the header and footer. Instead it ends up being 50px + 200px + 50px so the page is now 300px because the sidebars are set to the same height as the page container. There will be a big white space in the contents of the page.
I am using internet Explorer 9 and this is what I am getting as the effect when using this 100% method. I havent tried it in other browsers and I assume that it may work in some of the other options. but it will not be universal.
First you should create a div with id='footer' after your content div and then simply do this.
Your HTML should look like this:
<html>
<body>
<div id="content">
...
</div>
<div id="footer"></div>
</body>
</html>
And the CSS:
html, body {
height: 100%;
}
#content {
height: 100%;
}
#footer {
clear: both;
}
Try this:
body{ height: 100%; }
#content {
min-height: 500px;
height: 100%;
}
#footer {
height: 100px;
clear: both !important;
}
The div element below the content div must have clear:both.
Probably the shortest solution (works only in modern browsers)
This small piece of CSS makes "the middle content part fill 100% of the space in between with the footer fixed to the bottom":
html, body { height: 100%; }
your_container { min-height: calc(100% - height_of_your_footer); }
the only requirement is that you need to have a fixed height footer.
For example for this layout:
<html><head></head><body>
<main> your main content </main>
</footer> your footer content </footer>
</body></html>
you need this CSS:
html, body { height: 100%; }
main { min-height: calc(100% - 2em); }
footer { height: 2em; }
You can try this: http://www.monkey-business.biz/88/horizontal-zentriertes-100-hohe-css-layout/
That's 100% height and horizontal center.
just share what i've been used, and works nicely
#content{
height: auto;
min-height:350px;
}
As mentioned in Afshin Mehrabani's answer, you should set body and html's height to 100%, but to get the footer there, calculate the height of the wrapper:
#pagewrapper{
/* Firefox */
height: -moz-calc(100% - 100px); /*assume i.e. your header above the wrapper is 80 and the footer bellow is 20*/
/* WebKit */
height: -webkit-calc(100% - 100px);
/* Opera */
height: -o-calc(100% - 100px);
/* Standard */
height: calc(100% - 100px);
}
As specified the height property in MDN docs it is not inherited. So you need it to set to 100%. As it is known any web page starts with html then body as its child, you need to set height: 100% in both of them.
html,
body {
height: 100%;
}
<html>
<body>
</body>
</html>
And any child marked with height 100% will be the portion of 100 of parent height. In the example style above, we set the html tag as a 100%, it will be full height of the available screen height. Then the body is 100%, and so it will also be the full height, since it's parent is html.