I'm having some issues with min-height: 100%
I want the footer always below my content. Meaning, if the content is longer than the screen height, you don't see the footer, until you've scrolled all the way to the bottom
Also, when the content is shorter than the screen height, the footer needs to be at the bottom of the screen. Well, I thought I solved this just by adding min-height: 100%
<html>
<head>
<style>
html, body, main { min-height: 100% }
</style>
</head>
<body>
<main>
<article> .... </article>
<footer> ... </footer>
</main>
</body>
</htm>
DEMO
Now, for some reason the body tag seems to ignore this setting and its height simply fits the content.
Unfortunately, you can't just set the body to 100% ( DEMO )
Any suggestions how to fix this ?
Sticky footer 'hack' is usually done with the min-height and negative margin-bottom on the footer parent element. All parent elements up until root html, need to have height:100%;
article{
//height: calc(100% - 50px);
min-height: 100%;
background: yellow;
padding-bottom: 50px;
margin-bottom:-50px;
}
JSFIDDLE LONG CONTENT
JSFIDDLE SHORT CONTENT
The fantastic CSS Tricks website has, in their Snippets area a snippet for a Sticky Footer:
http://css-tricks.com/snippets/css/sticky-footer/
Or using jQuery:
http://css-tricks.com/snippets/jquery/jquery-sticky-footer/
latest link with demo
Or you can simply use Modern Clean CSS “Sticky Footer” from James Dean
So just change your HTML and CSS to this:
HTML
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<main>
<article> .... </article>
</main>
<footer> ... </footer>
</body>
</html>
CSS
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
Demo here
You can use display:flex for this:
html,
body {
padding: 0;
margin: 0;
height: 100%
}
main {
min-height:100%;
display: flex;
flex-direction: column;
background:blue;
}
article {
flex-grow: 1;
background:green;
}
footer {
background:orange;
}
<main>
<article>... </article>
<footer> ... </footer>
</main>
I modified your css to put the footer and the article in a relative position:
* {
margin: 0;
box-sizing: border-box;
padding: 0;
}
article {
height: calc(100% - 50px);
position: relative;
}
main {
background-color:lightgray;
}
footer {
background-color: green;
height: 50px;
position: relative;
bottom: 0;
width: 100%;
}
the fiddle:
http://jsfiddle.net/np9n4ckb/5/
If you don't want to mess with positioning, you can use vh units.
1vh equals 1% of the viewport's height.
(For reference, this is a good read: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/)
Fiddle: http://jsfiddle.net/np9n4ckb/6/
CSS
* {
margin: 0;
box-sizing: border-box;
padding: 0;
}
html, body {
min-height: 100vh; /* Minimum height is the full viewport */
}
article {
min-height: calc(100vh - 50px); /* Minimum height is the viewport height minus the footer */
}
main {
background-color:lightgray;
}
footer {
background-color: green;
height: 50px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* browser reset */
html {
height: 100%;
position: relative;
min-height: 100%: padding-bottom: 50px;
/* equal to footer height */
}
body {
height: 100%;
color: #fff;
}
footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 50px;
background: #ccc;
}
header {
background: #333;
}
main {
background: tomato;
}
<html>
<body>
<header>Menu</header>
<main>content of unknown height!!</main>
<footer>footer always stays at bottom</footer>
</body>
</html>
This is just what you need to do.
Related
Thanks to a good answer here, and a superb one here, I've got most of the layout I'm aiming for. Sticky, fixed height header and footer, body in the middle - centered and at a fixed aspect ratio.
The only thing not working is that the body pushes the footer off the bottom, so that it's no longer sticky. (run snippet, scroll down to see the not-sticky-anymore footer).
The only way I've been able to affect this is by limiting the height of the #parent div, for example, to 80vh. This ends up leaving space above the footer depending on the vh.
Is there a way to do just this layout below, except keep the footer on the page?
I found a pertinent similar question here on SO, but alas, unanswered.
* { margin: 0; box-sizing: border-box; }
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
header {
background-color: #cffac7;
height: 50px;
}
main {
background-color: #55086d;
}
footer {
background-color: #fceec7;
height: 50px;
margin-top: auto;
}
#parent {
width: 100vw;
height: 100vh;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
}
.ar-box {
max-width: 100%;
max-height: 100%;
background-color: #0bf;
aspect-ratio: 3/5;
}
.ar-box:after {
display: block;
content: "";
min-width: 100vw;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://cdn.jsdelivr.net/npm/#svgdotjs/svg.js#3.0/dist/svg.min.js"></script>
</head>
<body>
<header>header :-)</header>
<main>
<div id="parent">
<div class="ar-box">body :-)</div>
</div>
</main>
<footer>footer :-(</footer>
</body>
</html>
Here's a suggestion, using the "aspect ratio box" as a centered position absolute element, inside a flex: 1; parent
* {
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header,
footer {
background-color: #cffac7;
height: 50px;
}
#parent {
background-color: red;
position: relative;
flex: 1;
}
#aspectRatio {
background-color: #0bf;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
max-width: 100%;
max-height: 100%;
aspect-ratio: 3 / 5;
}
<header>HEADER</header>
<main id="parent">
<section id="aspectRatio">Aspect 3/5</section>
</main>
<footer>FOOTER</footer>
There is a way to do this by setting the elements to be position:fixed.
I was able to achieve this, albeit not using flexbox styling, but nonetheless:
<body>
<header/>
<main/>
<footer/>
</body>
------------------------
header {
position: fixed;
z-index: 1;
height: 50px;
}
main {
position: fixed;
top: 50px;
height: calc(100% - 100px); <-- total height of header/footer
}
footer {
position: fixed;
z-index: 1;
top: calc(100% - 50px);
height: 50px;
}
I want to build a flexible structure with `CSS like this
TOP and BOTTOM divs have fixed height, while central box have responsive height. And all of them should cover the whole container div.
Can anyone tell me please how to do this?
body{position: relative;padding: 0px; margin: 0px;}
.top-sec{ background: #30a7fc none repeat scroll 0 0;
height: 40px;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 100;}
.middle-sec{
bottom: 0;
clear: both;
left: 0;
overflow-x: auto;
overflow-y: initial;
position: fixed;
top: 40px;
width: 100%;
background: #000; color: #fff;
}
.bottom-sec{
background: #0000ff none repeat scroll 0 0;
bottom: 0;
height: 24px;
left: 0;
min-width: 100%;
padding: 0;
position: fixed;
right: 0;
z-index: 1000;
}
<div class="top-sec"></div>
<div class="middle-sec">Please put here big data</div>
<div class="bottom-sec"></div>
Quite easy.
Basic html:
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
and basic css:
body, html {
height:100%;
margin:0;
}
.header, .footer {
height:30px;
background-color:black;
width:100%;
}
.main {
height:calc(100% - 30px - 30px);
background-color:red;
width:100%;
}
Just don't forget that when using "height" in % you need to include a fixed height in all parents of the element to make it work (in this case bodyand html)
JSFIDDLE
Given this markup:
<div class="container">
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
</div>
These are the styles you need to use:
.container {
height: 100vh;
display: flex;
}
.header, .footer {
/* don't grow, don't shrink, be 50px */
flex: 0 0 50px;
background: black;
}
.main {
/* grow and shrink with the ratio of one */
flex: 1 1;
background: red;
}
Demo: http://jsbin.com/horarivopo/1/edit?html,css,output
Although be aware of browser support (IE10+ w/ prefixes): http://caniuse.com/#feat=viewport-units,flexbox
Here you have an example with CSS split for better understanding
Don't forget to vote and close the question, a lot of people tend to forget this, thanks.
/* flexbox */
main, header, footer, article { display: flex }
main { justify-content: space-between; flex-direction: column }
article { flex: 1 } /* fill available space */
/* flexbox optional rule */
header, footer, article { justify-content: center; align-items: center }
/* sizing */
html, body, main { height: 100% } /* CSS needs to know how to fill */
main, header, footer, article { width: 100%; max-width: 100% } /* max- for cross-browser quirks */
header, footer { height: 50px; line-height: 50px } /* same line-height centers text vertically */
/* styling */
body { color: white; margin: 0; padding: 0 }
header, footer { background-color: black }
article { background-color: red }
<main>
<header>some header</header>
<article>some article</article>
<footer>some footer</footer>
</main>
You can also try like this-
*{margin: 0;padding:0;}
html, body {height: 100%;color:#fff;}
header{height:50px;background: #000;position: absolute;top:0;width: 100%;}
section {min-height: calc(100% - 50px);margin-bottom: -50px;background:red;padding-top:50px;}
section:after {content: "";display: block;}
footer, section:after {height: 50px; }
footer{background: #000;}
<header>
Header
</header>
<section>
Here is Content and all.
</section>
<footer>
Footer
</footer>
Is there any way to make a page with header, sticky footer and the body should always fit 100% of the screen height - header and footer, with only HTML and CSS. See the image for more.
You can use an approach which allows you to keep the body at 100% height and have a sticky footer as well using a modern sticky footer approach:
http://mystrd.at/modern-clean-css-sticky-footer/
Steps to achieve this:
1. box-sizing:border-box;
2. html { position: relative; height: 100%;}
3. body{ text-align: center; min-height: 100%; margin: 0; overflow: hidden;}
4. container: absolute positioned with a top of the header height.
5. footer: absolute positioned with left and bottom:0;
Look at this demo:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html {
position: relative;
height: 100%;
}
body {
text-align:center;
min-height: 100%;
margin:0;
overflow:hidden;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 50px; /* Height of Footer */
width: 100%;
}
header {
height: 50px; /* Height of header */
line-height:50px; /* vertical align the title*/
width: 100%;
background-color:lightgreen;
}
.container{
background-color: darkgreen;
height: 100%;
position: absolute;
top: 50px; /* Height of header */
left: 0;
bottom: 0;
width: 100%;
right: 0;
}
footer{
background-color:yellow;
line-height:50px; /* vertical align the title*/
}
<header>HEADER</header>
<div class="container"></div>
<footer>FOOTER</footer>
Inspecting you will see that the body will always be 100% height and the footer will be sticky at the bottom.
Ps. Added box-sizing: border-box just because it's a good practice but it's not necessary for this approach.
If you're using a container in the body after the header then you should set your css like this:
.container {width: 100%; height: 100%; content: "" ;}
Add this to your css
html, body {
height: 100%;
}
And make a div, that has the content you called body, then give it 100% in height.
For an example
<header>..</header>
<section id="content"> <--- HAS 100% IN HEIGHT.
....content
</section>
<footer>..</footer>
Like this:
#content {
width: 960px; <-- definable.
height: 100%;
}
I have a page layout in which I have a fixed header which can have any height and a footer positioned at the bottom of the page. I'm looking for a css solution so that the content div fills the remaining space (vertically). In the jsfiddle below I've tried to do this, but as you can see the content is behind the footer.
HTML:
<main>
<header>
<ol>
<li>bar</li>
<li>foo</li>
</ol>
</header>
<section>
<div class="content"><div>
</section>
<footer></footer>
</main>
CSS:
header {
background-color: #abc;
z-index: 1000;
position: fixed;
top: 0px;
right: 0px;
left: 0px;
}
html, body, main, section {
height: 100%;
display: block;
}
.content{
background-color: #000;
height: 100%;
}
footer {
background-color: #def;
bottom: 0;
display: block;
height: 54px;
position: absolute;
width: 100%;
}
Is this possible with pure css(3) ?
jsfiddle
It is a bit of an ugly solution, but if you make the margin-top of the content div as -54px and add a div inside it with padding-top:54px, it works as expected.
HTML:
<div class="content"><div class="contentwrapper"></div><div>
CSS:
.contentwrapper {
padding-top:54px;
}
.content{
background-color: #000;
height: 100%;
margin-top:-54px;
}
Fiddle: http://jsfiddle.net/dohqn8m4/1/
Here a diffrent approach:
HTML:
<header>
<ol>
<li>bar</li>
<li>foo</li>
</ol>
</header>
<main>
<section>
<div class="content"></div>
</section>
<div class="push"></div>
</main>
<footer></footer>
CSS:
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
border: 0;
}
header {
background-color: #abc;
z-index: 1000;
position: fixed;
top: 0;
right: 0;
left: 0;
}
main {
min-height: 100%;
height: auto !important;
margin-bottom: -54px;
}
main > section{
padding-top: 72px;
}
.content {
background-color: #000;
}
.push {
height: 54px;
}
footer {
background-color: #def;
height: 54px;
}
Now the footer is always at the bottom aslong the content doesn't fill the hole page. In that case the "push" element provides enough space to deny overlapping of footer and content.
Your content div ist now placed under the footer through the padding. The height is actually 0 because of missing content. In my approach the content div fits always the content inserted.
Keep in mind that
a) for responsive purpose you had to know about the header height and adjust the padding of the section using media queries
b) the same for the footer. Adjust the height of the push element and adjust the margin-bottom value.
jsFiddle
Try positioning the content to be right above the footer
bottom: <footer-height>;
position: absolute;
I made sticky footer using this tutorial. I think it's easy and convenient to use.
CSS CODE
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
HTML CODE
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<nav></nav>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
</html>
DEMO URL
I am using a sticky footer and have a div that I need to have extend all the way down to the footer. Unfortunately when I add height: 100%, it doesn't help. I've also tried to make it display as a table in the css but that didn't help either.
You can see it here: http://jsfiddle.net/NDk5f/2/
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en"><head>
<meta charset="utf-8">
<link href="css/test.css" rel="stylesheet">
</head>
<body>
<div class="navbar">
Navbar
</div>
<div id="wrap">
<div class="container fill">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
</div>
<div id="push"></div>
</div>
<div id="footer">
Footer
</div>
</body>
</html>
CSS:
*{
margin: 0;
}
html,
body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
}
#push,
#footer {
height: 50px;
}
#footer {
background-color: #f5f5f5;
}
/* Apply class .fill to div to be stretched to bottom of page */
.fill{
height:100%;
display:table;
width: 100%;
margin-top: -50px;
padding: 50px 0 0 0; /*set left/right padding according to needs*/
-moz-box-sizing: border-box;
box-sizing: border-box;
background: red;
padding-top:75px;
}
.fill .row {
height: 100%;
display: table-row;
}
.container
{
width: 940px;
}
.container {
margin-right: auto;
margin-left: auto;
}
.container:before,
.container:after {
display: table;
line-height: 0;
content: "";
}
.container:after {
clear: both;
}
.navbar {
position: relative;
z-index: 2;
margin-bottom: 20px;
overflow: visible;
background-color: orange;
}
The easiest method is to use box-sizing: border-box and set fixed percentage heights on the elements. If you're looking for fixed heights on the footer/nav and dynamic heights on the content, it'll be tricky.
Usually I use a wrapper that's position: absolute to the viewport just below the header and just above the footer, and then a div inside that for the content, which uses height: 100%
The second method:
<nav>nav</nav>
<div id="wrap">
<div class="content">content</div>
</div>
<footer>footer</footer>
html,body { margin: 0 }
nav, footer { height: 20px; background: blue }
footer { position: absolute; bottom: 0; width: 100% }
#wrap { background: gray; position: absolute; bottom: 20px; top: 20px; right: 100px; left: 100px }
#wrap .content { height: 100% }
The wrapper will act as the fixed height for the content when the window is resized.
Fiddle
Luckily as browser's adopt css3, this will be even easier with flexbox.