Okay. I'm trying to get a page to display 100% of the height of the viewport, but the catch is the page has multiple divs that aren't always nested. I've been browsing multiple questions and other websites and I cannot find an answer that suits my needs.
I currently have a layout as so:
<html>
<body>
<div class="container">
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</body>
</html>
Where as the header and footer is 80px each, I am trying to get the content div to fill the rest of the viewport. I've tried setting html, body, & the container div to "height:100%" each and then setting the content div to min-height:100% and height:100% but that just makes the div expand to 100% of the viewport, and then the footer gets pushed down 80px (because the header is 80px), so the full page ends up as 100% + 160px (two 80px divs).
Any ideas? Cheers.
You can do this with simple display:table property.
Check this:
http://jsfiddle.net/HebB6/1/
html,
body,
.container {
height: 100%;
background-color: yellow;
}
.container {
position: relative;
display:table;
width:100%;
}
.content {
background-color: blue;
}
.header {
height: 80px;
background-color: red;
}
.footer {
height: 80px;
background-color: green;
}
.content, .header, .footer{
display:table-row;
}
original post here: http://peterned.home.xs4all.nl/examples/csslayout1.html
http://jsfiddle.net/cLu3W/4/
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;
}
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#content {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
border-top:6px double gray;
}
I don't have chrome right now and this doesn't seem to be working in jsfiddle but you should be able to achieve this by making all absolute positioned, having header have top set at 0px, footer bottom at 0px, and content have top: 80px, bottom 80px. You'll also have to make the container, body, and possibly html take up 100% height and have absolute or relative positioning.
*{margin:0; padding:0;}
.header{height:80px; background:salmon; position:relative; z-index:10;}
.content{background:gray; height:100%; margin-top:-80px;}
.content:before{content:''; display:block; height:80px; width:100%;}
.footer{height:80px; width:100%; background:lightblue; position:absolute; bottom:0;}
This is not perfect. For example, what happens when the text overflows .content is really not ideal, but you could solve this problem by using height based media queries to simplify the design for smaller screens.
This can be achived in multiple ways:
Use a table base layout (fully supported, but frowned upon)
Use the new CSS 3 flex box layout (no old IE support)
Using absolute positioning
I would recomend the 3rd option. See an example at http://jsfiddle.net/HebB6/
HTML:
<html>
<body>
<div class="container">
<div class="header">
Header
</div>
<div class="content">
Content
</div>
<div class="footer">
Footer
</div>
</div>
</body>
</html>
CSS:
html,
body,
.container {
height: 100%;
background-color: yellow;
}
.container {
position: relative;
}
.content {
background-color: blue;
position: absolute;
top: 80px;
bottom: 80px;
left: 0;
right: 0;
}
.header {
height: 80px;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.footer {
height: 80px;
background-color: green;
position: absolute;
top: 0;
left: 0;
right: 0;
}
Related
I have a footer div on my side, which should be at the very bottom, regardless of the content.
When the page loads, the footer looks good, but when another div loads much text, the text slides under the footers, so the footer doesn't dynamically adapt to the page size:
<style>
#div1 {
width: 300px;
margin-top: 300px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
}
</style>
<div id="div1">Lorem ipsum dolor sit amet [ ... much text ...]</div>
<div id="footer">Footer Copyright 2016</div>
I know, position: fixed could solve my problem, but I want the footer to be "under" the content, not "over".
Here is the fiddle: https://jsfiddle.net/4fjts5p4/
When you just use absolute, use also these, but I prefer position: fixed. This would be perfect:
#footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
min-height: 40px;
}
Use a min-height rather than height, which doesn't hardcode the height.
Moreover, you haven't closed the footer's } CSS rule.
Try position relative.
#footer {
position: relative;
bottom: 0;
width: 100%;
height: 40px;
}
If you use absolute it will take the footer outside the flow of the document.
See this fiddle.
You should put the footer and content both inside a div say its id is "wrapper" and its padding bottom should be same as footer height and its position should be relative. And then set the footer position to absolute with bottom 0.
So wrapper div code :
#wrapper
{
position:relative;
min-height:100%; /* in case if content is smaller than window size then footer will remain at bottom because of window this */
padding-bottom:40px;/* same as height of footer */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
background:#0c0;
height: 40px;
line-height:40px;
}
Working Demo : https://jsfiddle.net/4fjts5p4/4/
You can make it by structuring HTML like the bellowing, consisting wrapper, content and footer.
The key (also one drawback) is to set the height of footer,
A demo:http://codepen.io/anon/pen/XXjOam
HTML:
<div id="wrapper">
<div id="content">
</div>
<div id="footer">
</div>
</div>
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#content {
padding-bottom:100px; /* Height of the footer element */
}
#footer {
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
/* For highlighting, you may not need this */
#footer {
background:#ffab62;
border-top:1px solid #ff4b02;
color:#333;
text-shadow:1px 1px 0 rgba(255,255,255,0.6);
}
All you need to do is set position:relative; and height:auto; . This will fix all your issues.
<style>
#div1 {
width: 300px;
margin-top: 300px;
}
#footer {
position: relative;
bottom: 0;
width: 100%;
height: auto;
}
</style>
<div id="div1">Lorem ipsum dolor sit amet [ ... much text ...]</div>
<div id="footer">Footer Copyright 2016</div>
I'm having a small css issue with a basic html layout .
What is want is this : (without content)
http://jsfiddle.net/cge89ef4/1/
With content : http://jsfiddle.net/cge89ef4/2/
As you can see , the footer remains stuck and does not go to the bottom of the page as i want it too.
CSS :
body {
background-color: blue;
color:red;
margin: 75px auto 50px;
height:100%;
}
div#fixedheader {
position:absolute;
top:0px;
left:0px;
width:100%;
height:75px;
background:yellow;
}
div#fixedfooter {
position:absolute;
bottom:0px;
height:50px;
left:0px;
width:100%;
background:black;
}
Any way to fix it ?
Thanks
UPDATE
I have changed the DOM to HTML5 Tags for Header and Footer , I have also added a little JavaScript that reacts to the window resizing.
So IF your window height is more than the document height the footer is positioned absolute to the bottom, IF not the footer is positioned FIXED above the content
Also if you scroll down and the header is not visible any more it becomes fixed above the content as well
http://jsfiddle.net/cge89ef4/8/
UPDATE END
Here http://jsfiddle.net/cge89ef4/3/
change absolute to fixed for footer
position:fixed;
If you dont want the footer to overlap your content at any time you should add a margin or padding bottom to the content container with the height of the footer.
In addition you could look intho HTML5 tags , because there are already preset tag names for header, footer etc
For exampe:
<header></header>
<article><section></section></article>
<aside></aside>
<footer></footer>
use this styling for your body
body{
position: relative;
margin: 0;
}
Just make sure you give position: fixed to header and if you want the footer not to be fixed all the time, use a min-height.
body {
background-color: blue;
color: red;
margin: 75px auto 50px;
height: 100%;
}
div#fixedheader {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 75px;
background: yellow;
}
div#fixedfooter {
position: fixed;
bottom: 0px;
height: 50px;
left: 0px;
width: 100%;
background: black;
}
Fiddle: http://jsbin.com/behajakuse/1/edit?html,css,output
have the body position: relative;
I'm currently having a few issues keeping my footer at the bottom of the page and below the content. I currently have it sitting at the bottom of the page, just keeping it below the content seems to be the issue.
My footer layout is:
#footer
#footer-content
p.copyright
p.credit
/#footer-content
/#footer
My stylesheet:
#footer {
overflow: hidden;
clear: both;
max-width: 940px;
padding-top: 26px;
border-top: 1px solid #bbb;
color: #aaa;
position: fixed;
height: 80px;
width: 50%;
bottom: 0;
right: 0;
left: 0;
margin: 0 auto;
padding-bottom: 0;
text-align: center;
}
#footer-content {
width: 100%;
}
Setting position to absolute makes the whole footer disappear somewhere off the page so I can't just change that.
What can I do to keep my footer below the content? I'm open to any JavaScript solutions.
FIDDLE (Since it's WordPress I can't copy over everything)
EDIT:
Made a few edits. Still doesn't change my problem.
What you are describing is a footer that's on the bottom of the content. Defining the stuff in your footer div is unneeded information. You could have a diamond unicorn in the footer for all we care. The real information that's needed is the basic layout aka header region, content region, sidebar regions, footer region.
here is a live demo of what this will do http://matthewjamestaylor.com/blog/bottom-footer-demo.htm
This will expand the content on short content to push the footer to the bottom. for longer content the footer is under the content as the content gets bigger.
HTML
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS
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;
}
You need a container that will take up the view area and by setting the footer div to the absolute bottom of the container it will be on the bottom. the content "body" will expand the container as needed and the footer will be on the bottom just under the content every time. divs by default have a display:block so they will push to the next line every time.
I use this code across any websites that I make and it works for me -
#footer{
display: block;
text-align: center;
font-size: 0.75em;
bottom:0;
width: 100%;
height: 30px;
position: fixed;
}
I would believe that all your position: fixed is causing the problem, so I've tried cleaning it up for you in this JSFiddle.
The position: fixed; sets the divs position relative to the browser-window, and not the page.
I have editted your JSFiddle to apply a 'sticky footer'.
Your document structure had to change for that:
body
#container
...content...
#wrap-push
#footer
added this css:
html, body {
height: 100%;
}
#container
{
height: 100%;
margin-bottom: -107px;
}
#wrap_push
{
height: 107px;
}
#footer
{
height: 80px;
}
I know there is a lot of same topics, but is there any CSS way to stick bottom a footer with an height in % without overflowing the body and the header because of absolute position ?
I'm trying to stick this one :
html,body{
height: 100%;
}
#header{
background-color: yellow;
height: 100px;
width: 100%;
}
#holder {
min-height: 100%;
position:relative;
}
#body {
padding-bottom: 100px;
}
#footer{
background-color: lime;
bottom: 0;
height: 100%;
left: 0;
position: relative;
right: 0;
}
with html :
<div id="holder">
<div id="header">Title</div>
<div id="body">Body</div>
<div id="footer">Footer</div>
</div>
Code here : http://jsfiddle.net/TsRkB/
Thanks !
if you use display:table as a base , then your sticky footer can be any size and will be pushed down if content grows.
http://dabblet.com/gist/5971212
html {
height:100%;
width:100%;
}
body {
height:100%;
width:100%;
display:table;
table-layout:fixed;
margin:0 auto;
width:80%;
}
.tr {
display:table-row;
background:turquoise
}
section.tr {
height:100%;
background:yellow
}
for
<header class="tr"> <h1>title</h1><p>make me grow</p></header>
<section class="tr"><article>article</article></section>
<footer class="tr"> <p>Footer</p><p>make me grow</p></footer>
All the other solutions are out of date and have a major shortcoming: they don't work if the height of the footer is variable or unknown.
With the advent of the CSS flex model, solving this problem become very, very easy: while mostly known for laying out content in the horizontal direction, Flexbox actually works just as well for vertical layout problems. All you have to do is wrap the vertical sections in a flex container and choose which ones you want to expand. They'll automatically take up all the available space in their container.
Note how simple the markup and the CSS are. No table hacks or anything.
The flex model is supported by all major browsers as well as allegedly IE11+, though my IE doesn't render this snippet correctly yet.
html, body {
height: 100%;
}
#header {
background: yellow;
height: 100px; /* can be variable as well */
}
#wrapper {
display: flex; /* use the flex model */
min-height: 100%;
flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}
#body {
flex: 1;
border: 1px solid orange;
}
#footer{
background: lime;
}
<div id="wrapper">
<div id="header">Title</div>
<div id="body">Body</div>
<div id="footer">
Footer<br/>
of<br/>
variable<br/>
height<br/>
</div>
</div>
Fixed it for you, basically have to put the footer outside the wrapper and move it up...
http://jsfiddle.net/sMdmk/4/
#footer{
background-color: lime;
bottom: 0;
height: 10%;
left: 0;
position: relative;
right: 0;
top: -10%;
}
I'm trying to create a website on my own for my art portfolio and I ran across http://ryanfait.com/sticky-footer/. I'm having trouble adding an extra element for it.
I have the following HTML structure:
<html>
<head>
<link rel="stylesheet" href="style.css" ... />
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
<img src="image.png>
</div>
</body>
And the following style.css:
.wrapper {
position: relative;
width: 800px;
margin: 0 auto -50px;
}
.footer {
position: relative;
width: 100%;
margin: 0 auto;
padding: 0;
background-color:#000000;
text-align:center;
}
.footer img {
position: relative;
width: 400px;
top: -238px;
margin: 0 auto;
}
.footer a {
color: #fff;
text-decoration: underline;
border: 0;
}
.footer p {
position: absolute;
left: 0;
bottom: 4px;
width: 100%;
padding: 0;
color: #fff;
font: 0.8em arial,sans-serif;
}
with the layout.css:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */}
.footer { height: 50px; /* .push must be the same height as .footer */}
.push {
height: -100px; /* .push must be the same height as .footer */
}
I set the image negative so that it will overlap the main content when the window is resized. Also, I would like a sticky bottom "border" right below the image. However, no matter how much I mess with the margins or heights, I cannot get rid of the negative space that the above code creates. Do you have any suggestions?
**I figured it out.
The sticky-footer tutorial makes a sticky footer that stops at the border of the main body. What I wanted was a sticky footer that was a top "layer" that will go over the main body AND have a border element on the bottom.
I should not have used the 'top:-238px'. Instead, I nested a class under footer in html and css.
<div class="footer">
<img src="Image.png" width="400" height="238" />
<div class="bottom-border">
<p>Copyright (c) 2008</p>
</div>
</div>
and
.footer img {
position: relative;
width: 400px;
margin: 0 auto;}
.bottom {
position: relative;
width: 100%;
height: 20px;
margin: 0 auto 0;
padding: 0;
text-align:center;
background-color: #000000;}
Then, per sticky-footer's instructions in the 'layout.css' comments, I kept the .wrapper, .footer, .push height's all the same.**
Bit late but I can answer it anyway :) The problem is occurring as even though your image is relatively placed above the footer it still occupies the same place in the page. You want to use position:absolute;.
Here it is working
I made the following changes:
.footer img {
position:absolute;
}
.footer p {
position: relative;
height:4em;
}
Using position:absolute; will place the element in the position of the last non-static (default) element and remove it from the 'flow of the page'. So in this case it places it at .footer and takes it out of the page so it doesn't take up any space anymore.
EDIT: Also I broke the centering by changing it to absolute as margin:0 auto; won't work on position:absolute; elements. Add these rules to fix that.
.footer img {
left:50%;
margin-left:-200px;
}
I have easiest solution for sticky footer. Please simple add height: 100% on body and html. Then wrapper display: table . For adding element you can add any content/element inside of .w1 element .
And its footer flexible too.
Here is the code
html{height:100%;}
body{
margin:0;
height:100%;
background: #ccc;
}
#wrapper{
width:100%;
height:100%;
display:table;
margin:0 auto;
}
#footer{
width:100%;
overflow:hidden; /*for FF on Windows 7*/
display:table-footer-group;
height:1%;
background: #333;
color: #fff;
}
<div id="wrapper"> <!-- table -->
<div class="w1">
<p>header and content of the page</p>
</div>
<div id="footer"> <!-- table-footer-group -->
<p>footer content</p>
</div>
</div>