I've been consulting a lot of threads regarding sticky footers (footer sticking to the bottom of the page even if there is few content) and as much as theses workarounds can do the trick, I find them kind of messy and don't understand why simpler things don't work.
Here is what I'm trying to do :
<html>
<body>
<header></header>
<main></main>
<footer></footer>
</body>
</html>
and
html {
height: auto;
min-height: 100%
}
body {
height: 100%;
}
main {
height: calc(100% - 50px - 50px); //container's height - (header height + footer height)
}
header, footer {
height: 50px;
}
The problem I have with this code is that the body won't respect the height: 100% property and will just wrap around the body content instead of expanding to 100% of its container which is html.
The html tag is working properly, its minimum height is the viewport and will expand with height: auto; if the content is larger than the viewport.
Why won't the body expand to 100% of the html's height ?
I've tried my code and it works perfectly if I set html's height to a pixel value, the body will expand to 100% of html. But it won't expand if html's height is auto.
I can't neither set html's height to 100% (even tho then the body will expand to fill the html tag) because when content goes bellow 100% of the viewport, the html won't expand to contain the content, it will just overflow.
Is there something I'm missing ? How can I make this work ?
edit :
Thanks for all the insightful answers and comments !
Here is the best way to do this I could come up with :
html {
height: 100%;
}
body {
height: 100%;
}
main {
min-height: calc(100% - 50px - 50px); //container's height - (header height + footer height)
}
header, footer {
height: 50px;
}
Doing so will make the main content to expand if the content is longer than the viewport, or stay at the bottom of the page if the content is shorter than the viewport.
Since my header and footer have relative positioning I subtract their height to the main minimum height so the footer always fit in the viewport when there is few content, while not triggering the scrollbar to show up.
The only downside to this method is that main will overflow from the body and html element (since their height: 100% is the viewport's height but it doesn't affect the way the page will render, and seems to be working.
Well, your code works perfectly on my local. But, i know this is a general issue with most versions of browsers that html and body height may not behave correctly. They sometimes behave differently than espected with your approach.
You can try my approach, which i use for years and am satisfied with the result. I don't try to force html and body heights.
HTML structure:
<html>
<body>
<div id="page">
<header></header>
<main></main>
</div>
<footer></footer>
</body>
</html>
And the style is:
<style>
header, footer {
height: 50px;
}
#page {
min-height:100%;
}
main {
padding-bottom:50px;/* This is related to the footer's height */
}
footer {
margin-top: -50px;/* This is related to the footer's height */
}
</style>
If you want the footer always stay on the bottom, even if the page content is higher than the viewport, just replace #page's min-height attribute with height like this:
#page {
height:100%;
overflow:auto;
}
Did you consider flex ? It does require very litlle CSS
example header & footer fixed:
html,body {
height:100%;/* % needs a value from parent to be calculated, except for html wich takes window for reference. If you skip html, then body's height is 100% of null .... */
margin:0;
}
/* layout */
body {
display:flex;
flex-direction:column;
}
main {
flex:1;
overflow:auto;
/* see me */
box-shadow:inset 0 0 0 1px;
}
<header>Any<br/> height </header>
<main> whatever, <br/>i'll be showing a scrollbr instead pushing against footer.</main>
<footer> any height</footer>
footer fixed :
html,body {
height:100%;/* % needs a value from parent to be calculated, except for html wich takes window for reference. If you skip html, then body's height is 100% of null .... */
margin:0;
}
/* layout */
body {
display:flex;
flex-direction:column;
}
section {
flex:1;
overflow:auto;
/* see me */
box-shadow:inset 0 0 0 1px;
}
<section>
<header>header</header>
<main>and the rest </main>
</section>
<footer> any height footer remaining at window bottom</footer>
Replace Main with Section and it should give the output as you requested.
DOM
<html>
<body>
<header>asdf</header>
<section>asdf</section>
<footer>asdf</footer>
</body>
</html>
CSS
html {
height: auto;
min-height: 100%
}
body {
height: 100%;
}
section{
height: calc(100% - 50px - 50px);
}
header, footer {
height: 50px;
}
Output
<html>
<head>
<title>Stackoverflow</title>
<style>
header {
position: absolute;
right:0;
left:0;
top: 0;
background: yellow;
height: 50px;
}
main {
position: relative;
min-width: 100%;
margin-top: 50px;
height: 100vh;
background: green;}
footer {
position: fixed;
right:0; left:0;
bottom: 0;
background: blue;
height: 50px;
}
</style>
</head>
<body>
<header></header>
<main></main>
<footer></footer>
</body>
</html>
Related
I'm trying to make the <body> element take up at least 100% height of the browser window but also expand to any content. I'm also trying to make its only <div> child element take up 100% of the <body> height as well.
Illustration
This is what is currently happening; Case A is the problem, Case B works as expected.
In Case A, the div.page-content (red box) should expand to the body (blue box), but it does not.
Code
Here's what I have.
CSS
html {
height: 100%;
}
body {
min-height: 100%;
padding-top: 57px;
}
.page-content {
height: 100%;
}
Html
<html>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top"></nav>
<div class="page-content">
<div class="page-container"></div>
</div>
</body>
</html>
Note that the nav element is statically positioned and thus doesn't affect layout.
Body doesn't have a height specified because I want to height to be auto so it stretches to the content, but I don't want the height to be less than the browser window.
Body behaves as expected, it's the div.page-content that is only sizing to its own contents instead of stretching to the height of the body.
Is there a way to achieve the desired behavior without using javascript?
add overflow:visible; to body, change min-height:100%; to height:100%; for body and height:100%; to min-height:100%; for .page-content
skip page-content and use body as the main container, so you skip the inheritance trouble your are facing.
example
* {
box-sizing: border-box
}
html {
padding-top: 50px;
height: 100%;
background: white;
}
body {
min-height: 100%;
background: turquoise;
margin: 0 2em;
border:solid; /* see me */
}
nav {
position: fixed;
height: 50px;
top: 0;
left: 2em;
right: 2em;
background: tomato;
}
<nav class="navbar navbar-inverse navbar-fixed-top"></nav>
<div class="page-container"></div>
i try to create div footer, but have problem.
I have few div blocks located one by one inside container.
Container have 100% height.
Inside Container First Div have 100px height (header).
Second Div (Mainbody) need to have all height up to site bottom (bootom part of screen size) or more.
Third Div have absolute position and located on bottom.
But summary height of Container Div is more than 100% because i see scroll on right part of page.
How to resolve this?
Page with css: height:100% takes more than 100%
html, body {
height: 100%;
margin:0;
padding:0;
background-color: yellow;
}
.container {
position:relative;
min-height:100%;
background-color: green;
}
.header {
background-color: blue;
height: 100px;
}
.mainbody {
background-color: gray;
height: 100px;
}
.footer {
position:absolute;
bottom:0;
width: 100%;
background-color: red;
}
<body>
<div class="container">
<div class="header">
<p>
header
</p>
</div>
<div class="mainbody">
<p>
mainbody
</p>
</div>
<div class="footer">
<p>
footer
</p>
</div>
</div>
</body>
Open with your browser. It doesn't show any scroll bars as shown in this snippet. Set
.container{ height:100%}
rather than
min-height:100%
as it will exceed the page full size.
You might try position:fixed; bottom:0; left:0; right:0; height:somevalue; for the footer element, and for the body element, also add padding-bottom:somevalue(somevalue is the same value for body's padding-bottom and for footer's height)
A dirty solution for your html margins. I've added a margin-top property to your html, body css. Now there is no scrollbar on the right.
It seems like margin: 0; has no effect on margin-top property. I've read online that some browsers tend to set margins by default on certain elements like body. I've given you a really dirty solution that may not work well with responsive design.
html, body {
height: 100%;
margin: 0;
padding: 0;
margin-top: -8px;
background-color: yellow;
}
How do I make a footer (footer-tag) stick to the bottom of the screen, but not be sticky to the screen? If I'm on a 1080p monitor, the website has no scroll. When I try on 1366x768 the website becomes scrollable. I want the footer to be 100px below the content, because right now the footer is on top of the content. Here's my HTML structure:
<body>
<div id="container">
<div id="header"></div>
<div id="body"></div>
<footer></footer>
</div>
</body>
So I have a header, body, and footer inside a container. All the guides/tutorials I've seen, makes the footer stick to the screen. If it doesn't stick to the screen, it won't stick to the bottom. Whenever I open the Chrome Developer Tools bar/menu, the footer shoots back up, which I guess is because my body's height is 100%? But I'm not sure. Help appreciated! Thanks.
Quite easy: make html and body 100% height, your container (anything that has to be in the initial viewport) as well. Position the container relatively, the footer absolute, and put anything below.
Example on JSFiddle
Code
<style type="text/css">
html, body { height: 100%; }
#container { position: relative;
/* updated to support footer push */
min-height: 100%;
padding-bottom: 60px; /* must be the same as footer height */
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#below { height: 500px; } /* or no height, or whatever */
footer { position: absolute; bottom: 0; height: 60px; width: 100%; } /* as it's absolute, you should give it a specific height, or let it be as wide as its content */
</style>
<div id="container">
<footer>F-F-F-F-F-FOOTER!</footer>
</div>
<div id="below"></div>
Edit see the edited code above; min-height instead of height for the container to let it be able to stretch, but at least be as high as the screen. You'll have to add a bottom padding too, as high as the footer, to prevent the footer from overlapping your content. And also add box-sizing: border-box, otherwise the padding will add up to the height, resulting in the footer to be pushed down the initial viewport.
(For history's sake, here is the original fiddle)
footer { position : absolute; bottom : 0px; }
position : fixed ( When you want to stick any html element on screen and that will not move during scrolling )
position : absolute ( When it will show, it will be on the position that you specified, but later screen size and scrolling can change it's position )
Thanks ( Sorry for weak english )
:)
you could add some padding to the bottom of your page, and then use vh measurements:
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#header{
height:10vh;
}
#container {
background: red;
position:relative;
}
#body {
height: 70vh;
background: gray;
padding-bottom:20vh;
}
footer {
position: absolute;
bottom: 0;
height: 20vh;
width: 100%;
background: blue;
}
<body>
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<footer>footer</footer>
</div>
</body>
Trying to make the footer stick to the bottom and the content become automatically centered in between the header and footer.
Currently using this technique: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
But my footer appears way below and creates a huge gap in between.
Website: Stingrayimages.ca
Edit: So i managed to get the footer to stick to the bottom. However, the footer is not at the bottom of the page, it leaves a little bit of a scroll. And when shrink the window, the footer doesnt stop where the content.
Also i cant get the content div to stay in the middle without messing everything up.
Your container div should wrap your Head div. I think you mistook Ryan's head area for what designers commonly refer to as the header of the page, when in fact in the example it's the head element of the html. The extra space on the bottom is likely equal to the height of your head div.
In the sticky footer, remember, the container wraps all body content but the footer.
If you are using the same technique as the link, you are missing position at the footer.
And still, with the example you linked, see the structure:
<style type="text/css">
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 */
}
</style>
<div class="wrapper">
<div class="header"></div>
<div class="push"></div>
</div>
<div class="footer"></div>
But i would rather go with something like this:
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
}
div#container {
position: relative;
margin: 0 auto;
height: auto !important;
height: 100%; /* IE6: min-height*/
min-height: 100%;
}
div#header {
}
div#content {
padding: 1em 1em 5em;
}
div#footer {
position: absolute;
width: 100%;
bottom: 0;
}
</style>
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 8 years ago.
Can anyone explain how to align a footer div to the bottom of the page. From the examples I've seen, they all show how to make the div stay visible at the bottom, no matter where you've scrolled the page. Although I don't want it like that. I want it fixed at the bottom of the page, so it doesn't move. Appreciate the help!
UPDATE
My original answer is from a long time ago, and the links are broken; updating it so that it continues to be useful.
I'm including updated solutions inline, as well as a working examples on JSFiddle. Note: I'm relying on a CSS reset, though I'm not including those styles inline. Refer to normalize.css
Solution 1 - margin offset
https://jsfiddle.net/UnsungHero97/ur20fndv/2/
HTML
<div id="wrapper">
<div id="content">
<h1>Hello, World!</h1>
</div>
</div>
<footer id="footer">
<div id="footer-content">Sticky Footer</div>
</footer>
CSS
html, body {
margin: 0px;
padding: 0px;
min-height: 100%;
height: 100%;
}
#wrapper {
background-color: #e3f2fd;
min-height: 100%;
height: auto !important;
margin-bottom: -50px; /* the bottom margin is the negative value of the footer's total height */
}
#wrapper:after {
content: "";
display: block;
height: 50px; /* the footer's total height */
}
#content {
height: 100%;
}
#footer {
height: 50px; /* the footer's total height */
}
#footer-content {
background-color: #f3e5f5;
border: 1px solid #ab47bc;
height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
padding: 8px;
}
Solution 2 - flexbox
https://jsfiddle.net/UnsungHero97/oqom5e5m/3/
HTML
<div id="content">
<h1>Hello, World!</h1>
</div>
<footer id="footer">Sticky Footer</footer>
CSS
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
#content {
background-color: #e3f2fd;
flex: 1;
padding: 20px;
}
#footer {
background-color: #f3e5f5;
padding: 20px;
}
Here's some links with more detailed explanations and different approaches:
https://css-tricks.com/couple-takes-sticky-footer/
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
ORIGINAL ANSWER
Is this what you mean?
http://ryanfait.com/sticky-footer/
This method uses only 15 lines of CSS and hardly any HTML markup. Even better, it's completely valid CSS, and it works in all major browsers. Internet Explorer 5 and up, Firefox, Safari, Opera and more.
This footer will stay at the bottom of the page permanently. This means that if the content is more than the height of the browser window, you will need to scroll down to see the footer... but if the content is less than the height of the browser window, the footer will stick to the bottom of the browser window instead of floating up in the middle of the page.
Let me know if you need help with the implementation.
This will make the div fixed at the bottom of the page but in case the page is long it will only be visible when you scroll down.
<style type="text/css">
#footer {
position : absolute;
bottom : 0;
height : 40px;
margin-top : 40px;
}
</style>
<div id="footer">I am footer</div>
The height and margin-top should be the same so that the footer doesnt show over the content.
Your title and comments imply that you weren't looking for a sticky footer (stuck to the bottom of the window as content scrolls below it). I assume you were looking for a footer that would be forced to the bottom of the window if the content does not fill the window, and push down to the bottom of the content if the content exceeds the window boundary.
You can accomplish this with the following.
<style>
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
</style>
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>
Source: How to keep footers at the bottom of the page
Use
<div style="position:fixed; bottom:0; height:auto; margin-top:40px;
width:100%; text-align:center">
I am footer
</div>
Footer will not go upwards
check this out, works on firefox and IE
<style>
html, body
{
height: 100%;
}
.content
{
min-height: 100%;
}
.footer
{
position: relative;
clear: both;
}
</style>
<body>
<div class="content">Page content
</div>
<div class="footer">this is my footer
</div>
</body>
A simple solution that i use, works from IE8+
Give min-height:100% on html so that if content is less then still page takes full view-port height and footer sticks at bottom of page. When content increases the footer shifts down with content and keep sticking to bottom.
JS fiddle working Demo: http://jsfiddle.net/3L3h64qo/2/
Css
html{
position:relative;
min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
margin:0;
padding:0;
}
.pageContentWrapper{
margin-bottom:100px;/* Height of footer*/
}
.footer{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height:100px;
background:#ccc;
}
Html
<html>
<body>
<div class="pageContentWrapper">
<!-- All the page content goes here-->
</div>
<div class="footer">
</div>
</body>
</html>
I am a newbie and these methods are not working for me. However, I tried a margin-top property in css and simply added the value of content pixels +5.
Example: my content layout had a height of 1000px so I put a margin-top value of 1005px in the footer css which gave me a 5px border and a footer that sits delightfully at the bottom of my site.
Probably an amateur way of doing it, but EFFECTIVE!!!