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.
Related
I looked at some of the other answers for this, but none of them seem applicable because, although my fixed divs' dimensions are fixed, they're unknown until the page actually renders.
I have a fixed header div, followed by another div. The second div contains a sidebar div, and finally the content div:
<header>stuff</header>
<div id="wrapper">
<nav>sidebar stuff</nav>
<div id="content">Content</div>
</div>
The wrapper uses display: flex to put the sidebar and the content divs side by side.
My current goal is to fix the header and the sidebar when scrolling. The problem is that position: fixed takes the header and sidebar out of the regular flow, which makes it hard to position the content div relative to them. As a bonus, I don't know the dimensions of the header/sidebar until they render, so I can't just do position: absolute on the content div.
I am using React, and therefore would like to avoid manual DOM manipulation (e.g. jQuery).
Here is the code. Hope it will help you. If any changes let me know.
*{
margin: 0px;
}
#sidebar {
/*Strictly Necessary */
position:fixed;
height: 100%;
width:30%;
margin: 0px;
/*Aesthetics*/
background: lightblue;
border-radius: 7px;
}
#rightSideWrapper {
/*Strictly Necessary */
width:70%;
float: right;
/*Aesthetics*/
background: black;
}
header {
/*Strictly Necessary */
position: fixed;
width: 70%;
height: 100px; /*Adjust the hight to your purposes*/
/*Aesthetics*/
background: lightSalmon;
border-radius: 7px;
}
.ContentBox{
margin-top: 100px; /*The height of the header*/
display:flex;
flex-flow: row wrap;
}
main, section, footer {
/*Aesthetics*/
background: lightgray;
border-radius: 7px;
margin: 5px;
padding: 20px;
}
main {
/*Strictly Necessary */
height: 400px;
order: 1;
flex: 0 1 100%;
}
section {
/*Strictly Necessary */
height: 400px;
order: 2;
flex: 0 1 100%;
}
footer {
/*Strictly Necessary */
height: 100px;
order: 3;
flex: 0 1 100%;
}
<html>
<!--...-->
<head>
<meta charset="utf-8">
<title> Ghost </title>
<link rel="Stylesheet" href="css/style.css">
</head>
<body>
<div id="sidebar">
Side Content
</div>
<div id="rightSideWrapper">
<header>
Header
</header>
<div class="ContentBox"><!--. poner en minusculas.-->
<main>
Main Content
</main>
<section>
Section Content
</section>
<footer>
Footer
</footer>
</div>
</div>
</body>
</html>
Either you can use this code.
https://jsfiddle.net/gqsaedr7/2/
* {
padding: 0;
margin: 0;
}
header {
background: black;
padding: 15px;
position: fixed;
width: 100%;
}
#wrapper {
display: flex;
height: 100vh;
padding-top: 50px;
}
#navbar {
background: pink;
width: 20%;
position: fixed;
height: 100vh;
}
#content {
background: lightblue;
width: 100%;
padding-left: 20%;
}
<header>Header</header>
<div id="wrapper">
<nav id="navbar">sidebar stuff</nav>
<div id="content">
<div class="class-1">
ABC
</div>
<div class="class-2">
XYZ
</div>
</div>
</div>
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.
I'm using Twitter Bootstrap's 'sticky footer' CSS to ensure my footer appears at the bottom of my page. How can I make my content (the blue div in the example) stretch all the way down to the footer (the yellow div in the example)? I've tried making .content 100% height but that has no effect.
My CSS
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.content {
height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
My HTML
<body>
<div class="header">This is my header</div>
<div class="content">This is my content</div>
<div class="footer">This is my footer</div>
</body>
Example: http://jsfiddle.net/pjktqnmo/1/
Ref: http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css
Update: My header contains my page title so the height of the header varies from page to page.
here is a solution with no position property being used.
see snippet below:
html, body {
height: 100%;
margin: 0;
color:grey;
}
.header {
background-color:red;
}
.content {
min-height: 100%;
margin-bottom: -60px; /* equal to footer height */
background-color:blue
}
.content:after {
content:"";
display: block;
}
.footer, .content:after {
height: 60px;
}
.footer {
background: yellow;
}
<body>
<div class="header">This is my header</div>
<div class="content">This is my content</div>
<div class="footer">This is my footer</div>
</body>
More info here: sticky footer
UPDATED ANSWER Based on a Discussion with OP, where OP stated that doesn't want to have a Vertical ScrollBar, therefore here is a solution below:
What I did? Make your div .header child of div .content, with 0 changes on CSS regarding my 1st snippet above.
html, body {
height: 100%;
margin: 0;
color:grey;
}
.header {
background-color:red;
}
.content {
min-height: 100%;
margin-bottom: -60px; /* equal to footer height */
background-color:blue
}
.content:after {
content:"";
display: block;
}
.footer, .content:after {
height: 60px;
}
.footer {
background: yellow;
}
<div class="content">
<div class="header">This is my header</div>
This is my content
</div>
<div class="footer">This is my footer</div>
If your header is 30px tall, and your footer is 60px tall, this should work for the content:
position: absolute;
left: 0;
right: 0;
top: 31px;
bottom: 61px;
Set the height like this:
html, body {
height: 100%;
}
.content {
min-height: 100%;
}
http://jsfiddle.net/pjktqnmo/6/
It's working pretty well with javascript.
It also allows you to have to good height when user changes window dimensions.
Call this on page load and when user changes the window dimension:
$('.content').css('height',$(document).height() - ($('.header').height() + $('.footer').height() + `MARGIN TOP OR PADDING`) - $('.contact').height());
You could try using a table instead as a container for your page. Make sure that your <html>, <body>, and <table> elements have their width and height at 100%.
Make three rows in your table and put your header, content, and footer into each row, then make the content row 100% height so it will take up the rest of the page space.
Lastly, remove the spacing between the table cells
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.header {
background-color: green;
}
.content {
height: 100%;
background-color: cyan;
}
.footer {
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
table {
width: 100%;
height: 100%;
border-spacing: 0px;
}
td {
padding: 0px;
}
.contentCell {
height: 100%;
}
<body>
<table>
<tr>
<td>
<div class="header">This is my header</div>
</td>
</tr>
<tr class="contentCell">
<td>
<div class="content">This is my content</div>
</td>
</tr>
<tr>
<td>
<div class="footer">This is my footer</div>
</td>
<tr>
</table>
</body>
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
First off, similar but never answered questions:
vertically-scrolling-percentage-based-heights-vertical-margins-codepen-exampl
scroll-bar-on-div-with-overflowauto-and-percentage-height
I have an issue with scrolling a center part of the web page while its height needs to be auto.
Here is a fiddle
The header needs to be on top at all times, meaning I don't want the body to become larger than 100%.
However the div #messages can become larger, and that div needs to scroll on its own.
The #messages has a margin-bottom to leave room for the fixed bottom div.
I tried making the div #messages with box-sizing: border-box; and making it height:100% and padding to keep it in place but this was a really nasty looking solution and the scroll bar was the full page height instead of only the inner part.
Any help would be greatly appreciated.
You want something like This
Or maybe - his big brother..
Pure CSS solution, without fixing any height.
HTML:
<div class="Container">
<div class="First">
</div>
<div class="Second">
<div class="Content">
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.First
{
/*for demonstration only*/
background-color: #bf5b5b;
}
.Second
{
position: relative;
z-index: 1;
/*for demonstration only*/
background-color: #6ea364;
}
.Second:after
{
content: '';
clear: both;
display: block;
}
.Content
{
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
You could try the following.
You HTML is:
<div id="container">
<div id="header">The header...</div>
<div id="content">
<div id="messages">
<div class="message">example</div>
...
<div class="message">example</div>
</div>
<div id="input">
<div class="spacer">
<input type="text" />
</div>
</div>
</div>
</div>
Apply the following CSS:
html, body {
height: 100%;
}
body {
margin:0;
}
#header {
background:#333;
height: 50px;
position: fixed;
top: 0;
width: 100%;
}
#content {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 45px;
overflow-y: scroll;
}
#messages {
overflow: auto;
}
#messages .message {
height: 79px;
background: #999;
border-bottom: 1px solid #000;
}
#input {
position:fixed;
bottom:0;
left:0;
width:100%;
height: 45px;
}
#input .spacer {
padding: 5px;
}
#input input {
width: 100%;
height: 33px;
font-size: 20px;
line-height: 33px;
border: 1px solid #333;
text-indent: 5px;
color: #222;
margin: 0;
padding: 0;
}
See demo at: http://jsfiddle.net/audetwebdesign/5Y8gq/
First, set the height of 100% to the html and body tags, which allows you to reference the view port height.
You want the #header to be fixed towards the top of the page using position: fixed, similarly for your footer #input.
The key is to use absolute positioning on #content to stretch it between the bottom edge of the header and the top edge of the footer, and then apply overflow-y: scroll to allow it to scroll the content (list of messages).
Comment
The source code for the #input block may be placed outside of the #content block.