First let me say that it seems Internet Explorer 8 completely ignores box-sizing: border-box; declaration on a box, when there is a min-height set on it as well (this post confirms that: https://stackoverflow.com/a/11714178/3355252).
Now let me describe what I need to accomplish. Here's my site (much simplified): http://jsfiddle.net/ttKP3/. Doctype is HTML 4.01 Strict.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head></head>
<body>
<div id="header">header</div>
<div id="main">main</div>
<div id="footer">footer</div>
</body>
html,
body {
height: 100%;
margin: 0;
}
#header,
#footer {
height: 100px;
}
#main {
box-sizing: border-box;
min-height: 100%;
width: 300px;
margin: -100px auto;
padding: 100px 0;
}
What I need is footer at the very bottom of the screen and the main box filling the whole screen from the top to the bottom. Also, when the content gets bigger (click Add content in JSFiddle few times) I need the main box to enlarge and footer to move accordingly.
It renders just fine in Chrome and Firefox. You probably won't be able to run it in IE8 (it doesn't render JSFiddle), but border-box property on main is completely ignored and so that main box is 200px higher than it should be - the footer is below the visible area of screen.
As it looks like it couldn't be handled by using border-box and min-height, I'm looking for any other solution for IE8. The only one that came to my mind was using calc, that is height: calc(100% - 200px); but IE8 doesn't support that as well. By the way I have a conditional adding ie8 class on html element when ran in IE8, so I don't need a cross browser solution - just CSS to get the desired layout in that particular browser.
After reading once more this sticky footer post on CSS-tricks and tinkering a bit, I found a clean solution that doesn't require any markup changes (you can do with only 3 containers: header, main and a footer) nor using box-sizing at all. It works in IE8 just as well.
html,
body {
height: 100%;
margin: 0;
}
#header,
#footer {
height: 100px;
}
#header {
margin-bottom: -100px;
}
#footer {
margin-top: -100px;
}
#main {
min-height: 100%;
width: 300px;
margin: 0 auto;
}
/* Space for header and footer. */
#main:before,
#main:after {
display: block;
content: "";
height: 100px;
}
You may like to apply the margins to main instead of header and footer.
Here's my fiddle with this solution applied: http://jsfiddle.net/ttKP3/1/
Related
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%
I have a lot of space under the footer, and this is something that I would really like to get rid of. For some reason, this space only appears in Google Chrome and not in Firefox.
Heres an image showing it.
http://puu.sh/a6XQI/ec07f0ba31.jpg
What I would like to have happen is my content resize according to the screen size. I am not sure if I can do that because I dont have much content, just a few images.
Any suggestions would be appreciated.
Since you didn't provide any code, I would assume this has to do with the height of you page content being shorther than your window height. Many people who come from a print design background are often perplexed by the concept that a footer doesn't automatically appear at the bottom of a page. The position of dynamically sized elements depends on their content, which as you may come to find out, is very frustrating when a client wants a website built BEFORE providing any content. But I digress.
Assuming the root problem is caused by my former assumption, to achieve what is known as a sticky footer, implement the following to your existing page structions:
jsFiddle: http://jsfiddle.net/63mp6/
HTML
<div class="primary">
<div class="header">
Header Content
</div>
<div class="content">
Main body Content
</div>
<div class="footer">
Footer content
</div>
</div>
CSS
*{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
html, body {
position: relative;
width: 100%;
height: 100%;
background: #eee;
}
.primary {
position: relative;
width: 80%;
height: 100%;
margin: 0 auto;
}
.header{
min-height: 100px;
min-width: 100%;
background: #aaa;
}
.content {
min-width: 100%;
min-height: 200px;
background: #fff;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
min-height: 100px;
background: #666;
}
What's happening here is you're resetting default styling to the parent containers, forcing them to 100% height of the window and then telling the footer position about of the default page flow to the bottom of it's parent container. Notice the position: relative; attributes on the primary and html, body definitions. Those set the tone for their child elements to be relative to them instead of the window. Without the position declarations, the child elements would position themselves to the highest element with a relative position, which would be the window itself.
I have a page with only a couple of lines of content. I want the footer to be pushed to the bottom.
<div id="footer"></div>
I don't want to use
#footer
{
position:fixed;
bottom:0;
}
AKA Sticky Footer
Is this possible without jQuery?
any suggestions?
This Flexbox solution is neater and far easier to implement:
HTML
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
CSS
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
}
Just ensure you wrap the necessary divs inside the body.
Update 2021 - CSS GRID
Here is a solution using CSS Grid, this is by far the best way to do it on 2021.
html, body {
margin: 0;
height: 100%;
}
body {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr;
grid-template-areas: "main" "footer";
grid-template-rows: 1fr 80px;
}
main {
background-color: #F8BBD0;
grid-area: main;
}
footer {
background-color: #7E57C2;
grid-area: footer;
}
<body>
<main>The content</main>
<footer>Footer</footer>
</body>
Old Answer
There is another sticky footer by Ryan Fait that doesn't use position fixed:
* {
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 */
}
Here is a solution that does not require that the footer be placed outside of the main wrapper element, which is how most people structure their pages.
html,
body {
margin: 0;
height: 100%;
}
.wrapper {
box-sizing: border-box;
position: relative;
padding-bottom: 1em; /* Height of footer */
min-height: 100%;
}
header {
background-color: #cff;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
color: #fff;
background-color: #000;
}
<div class="wrapper">
<header>I am the header.</header>
<article>I am content that doesn't fill the page. The footer will appear at the bottom of the browser window. However, when I do fill the page, you will need to scroll down to see the footer.</article>
<footer>I am the footer.</footer>
</div>
Explanation
The wrapper element will fill 100% of the viewport height. (You could also use 100vh for the wrapper if you don't want to set the height of the html and body elements.) The wrapper also has a bottom padding to create a placeholder for the footer to sit.
The footer is absolutely positioned to the bottom of the wrapper and sits in the placeholder created by the wrapper's bottom padding.
This means that when the page does not have scrollbars, the footer will be positioned at the very bottom. However, when there is enough content for scrollbars to appear, the footer will be pushed down below the content.
(The color and background-color CSS properties in the example are for decoration only, obviously. They are included so that when you run the code, you can clearly see the separated sections.)
Try Sticky Footer Solution by Steve Hatcher
/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/
* {
margin: 0;
padding: 0;
}
/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to the total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow: auto;
padding-bottom: 180px;
}
/* must be same height as the footer */
#footer {
position: relative;
margin-top: -180px; /* negative value of footer height */
height: 180px;
clear: both;
}
/*Opera Fix*/
body:before {
/* thanks to Maleika (Kohoutec)*/
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px; /* thank you Erik J - negate effect of float*/
}
/* IMPORTANT
You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
*/
Another way to do this if you don't know the footer size is to use javascript and css
html, body{
height:100%;
height:100%;
}
#footer{
background-color: #292c2f !important;
position:absolute;bottom:0px;
}
and Javascript part
$(document).ready(function(){
if ($(document).height() > $(window).height()) {
$('#footer').css('position', 'relative');
}
});
You can do this with another approach just easily by setting min-height on the tag before your footer tag.
.the-tag-before-footer{
min-height:30%;
}
I tried a lot of approaches, but results were different when page was totally fill or not. The simplest and efficient solution is to use flex.
html, body {height: 100%;}
body {display: flex; flex-direction: column;}
.content {flex: 1 0 auto; padding: 20px;}
.footer {flex-shrink: 0; padding: 20px;}
<div class="content">
<h1>The GOAT Footer with Flexbox</h1>
<p>You can add content to test with a full page</p>
</div>
<footer class="footer">
The GOAT Footer
</footer>
Credits to CSS Trick
First wrap all of your main content in a div element and give it a class of “wrapper” (or call it whatever you want).
HTML:
<body>
<div class="wrapper">
<h1>Main Content</h1>
</div>
<footer>
<p>Footer Content</p>
</footer>
</body>
Now, make sure you give your footer a height.
Then use the calc() function to set the height of your wrapper equal to the height of the viewport (display), minus the height of the footer.
.wrapper {
min-height: calc(100vh - 50px);
}
footer {
height: 50px;
}
Now, if you have extra margins on your wrapper content you will have to increase the amount of pixels you subtract from the viewport height to reflect that. Other than that, this is a super easy and quick fix. No javascript needed, and only two CSS rules.
The problem is simple to solve for anyone using Bootstrap 4 or higher, just include this snippet on your website:
<script>
$(document).ready(function(){
if ($('body').height() < $(window).height()) {
$('footer').addClass('position-absolute bottom-0');
} else {
$('footer').addClass('position-static');
}
});
</script>
Here we check if the height of the BODY tag is less than the height of the browser window, if positive we place the footer at the bottom of the page and if negative we make the footer static and it will remain where it is. You don't need to change your current code, you just need to include this javascript in your page or package, remembering that to work the <body> tag must have position: relative, if you haven't changed the tag's "position" property in CSS <body>, you don't need to do anything as it is the default value.
Make sure to include the code after jquery, without jquery it won't work.
If you are not using the <footer> tag, you should change the $('footer') selector as appropriate.
Im just wondering if this is a browser rendering issue or incorrect css.
A nice way to scale a div in a defined aspect-ratio is, using a transparent image as a child element.
I have a small demo here. Under need this question.
But why doesn't it work nicely if I want a height of 100%.
I tested this in FF10, Safari 5.1.2, IE8 and IE9. (only ie8 seems to render correctly...)
Hope somebody can explain the problem and maybe come up with a solution.
Regards,
Rik
<!DOCTYPE html>
<html lang="uk">
<head>
<title>test</title>
<style>
html
, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: green;
}
/* AUTO WIDTH - doesnt render correct when scaling the browser window to a smaller size */
.holder1 {
position: relative;
display: inline-block;
height: 100%;
width: auto;
background: yellow;
border-right: 1px solid red;
}
.holder1 .ratio {
display: block;
height: 100%;
width: auto;
}
/* AUTO HEIGHT - works fine */
.holder2 {
position: relative;
display: inline-block;
height: auto;
width: 100%;
background: yellow;
border-right: 1px solid red;
}
.holder2 .ratio {
display: block;
height: auto;
width: 100%;
}
</style>
</head>
<body>
<span class="holder1">
<img src="/images/empty_image.png" class="ratio" alt="Ratio image">
</span>
</body>
</html>
After view your question, I have some idea and suggest for your code:
1.Different between width:auto and width:100%, when you set auto for width, you leave the browser handle this width, with every different browser, they will handle width:auto follow their own rules. With width:100%, you force the browser must expand to have full width.That is what I think.
But for sure your div can expand 100% on every cross browsers, add css min-width:100%, it will do as you wish correctly.
2.About your CSS, I need you take a look at position:relative, this line of code have no sense, in this situation,
position:relative = position:static
when you use position:relative, you must describe where is the position you wish your element relative to, add top or left to do it.
Hope it can help you!
trying to implement a dialog-box style behaviour using a separate div section with all the stuff inside it.
When the "dialog box" needs to be shown, it has to display at the center of the WINDOW, not in the center of the page, that is, REGARDLESS of the scroling position. Furthermore, the correct solution will not move the "dialog box" if the user scrolls the page.
In Chrome and FF this works using position='fixed' and centering the div in the intuitive way.
This does not seem to work in IE6 (apparently fixed is not supported there).
Any ideas?
If I were you I would do it using jQuery and I would suggest you try it out too. This should fit perfectly for jQuery based solution [jQuery Version][1] or try out
body {
font: 80% verdana, arial, helvetica, sans-serif;
text-align: center; /* for IE */
}
#container {
margin: 0 auto; /* align for good browsers */
text-align: left; /* counter the body center */
border: 2px solid #000;
width: 80%;
}
Try the method outlined here.
Use overflow-y and absolute positioning to emulate fixed positioning in IE6 using the following steps:
Create an absolutely positioned div and give it the desired top and left coordinates on the page
Set html {overflow-y: } to be hidden or visible instead of the default auto or scroll to eliminate the scrollbar for the absolutely positioned div
Set body{overflow-y: } to be auto or scroll to insert a new scrollbar for the body content
Set body { margin:0; height:100% } to make sure the content scrollbar goes the length of the page
Set top and left margins on the body to separate the content from the absolutely positioned div
Make sure the doctype is set to trigger Standards Mode in IE
Set the absolutely positioned div to top:50%; left:50%;
Add position:relative and the desired opacity to the container div
If the doctype is not set, move the html rules to the body tag, and the body rules to a wrapper div
<!DOCTYPE html>
<html>
<head>
<style>
body { margin:0; margin-left: 14em; }
#fixedbox { position: fixed; top: 1em; left: 1em; width: 10em; }
#fixedbox { padding: 0.5em; border: 1px solid #000; }
#container { height: 2000px; }
#media,
{
html { _overflow-y: visible; *overflow-y: auto; }
body { _overflow-y: auto; _height: 100%; }
#container { _position: relative; }
#fixedbox { _position: absolute; _top:50%; _left: 50%; }
}
</style>
</head>
<body>
<div id="container">
Fixed box
</div>
<div id="fixedbox">
Homer
</div>
</body>
</html>