Hi all I am having trouble getting my footer to stick to the bottom of the page. I have followed all the usual advice but my left column seems to expand beyond it's container div, which consequently pushes the footer off the bottom of the page. I have a fairly complicated layout since I have a fair amount of collapsible panels via jQuery but I'll give you the basic structure.
Basic HTML:
<html>
<head></head>
<body>
<div id="container">
<div id="content_header"> <!-- collapsible top panel -->
</div>
<div id="show_content_header"> <!-- tab shown to expand top panel when minimized-->
</div>
<div id="content_left_panel"> <!-- collapsible left panel -->
</div>
<div id="show_left_panel"> <!-- tab shown to expand left panel when minimized -->
</div>
<div id="main_content">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
And the CSS:
body
{ height: 100%;
margin:0;
padding:0;}
html, body, #container { height: 100%; }
body
#container { height: auto; min-height: 100%; }
#content_header
{ position:fixed;
width:100%;
left:0;
height:200px;
background:url(../images/image.png) repeat-x;
border:1px solid #000;
z-index: 100; }
#show_content_header
{ position:fixed;
z-index:2;
display:none;
width:100%;
height:40px;
top:40px;
left:0; }
#content_left_panel
{ position: absolute;
top: 235px;
left: 0px;
width: 200px; /*Width of frame div*/
height: auto; /*usually 100%*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
z-index:0;}
#show_content_left_panel
{ position:fixed;
left:0;
float:left;
padding-top:5px;
display:none;
width:0px;
height:30px;
cursor:pointer;
top:90px;}
#main_content
{ position: relative;
margin-left:210px;
margin-top: 235px;
margin-right:10px;
margin-bottom: 100px;
height: 100%;
overflow: hidden;
z-index:0;}
#footer {
position: relative;
z-index: 100;
height: 100px;
margin-top: -100px;
width:100%;
background:url(../images/image.png) repeat-x;
clear: both;}
As I said my footer remains at the bottom of page when the 90% of the time, but as soon as the #content_left_panel exceeds the height of the main content then the footer no longer remains at the bottom of the page, rather it is rooted to the bottom of the container div. I am confused as the #content_left_panel is breaking out of the container I am guessing it is something to do with it being a float!
Any help is much appreciated!
Cheers
I don't really understand what kind of layout you want but #content_left_panel has position:absolute; rule, so
It is removed from the normal flow entirely
(http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning)
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>
Let's see if I can explain this correctly. I want a header, always visible AND content AND a footer that is hidden behind the content, that becomes visible when scrolled to the footer. Here's what I have so far...
#container {
height:100%;
width:100%;
position:relative;
}
#top {
height:25vh;
width:100%;
background-color:red;
position:fixed;
top:0;
}
#content {
height:120vh;
width:100%;
background-color:green;
position:relative;
}
#bottom {
height:35vh;
width:100%;
background-color:blue;
position:fixed;
bottom:0;
}
<div id="container">
<div id="top">
</div>
<div id="content">
</div>
<div id="bottom">
</div>
</div>
What this code currently does: Header is hidden behind content and footer is always visible overlapping content.
Here is the current test page... http://next-factor.com/test-layout.php
Much help is greatly appreciated. Thank You!
give a z-index in #top
#top {
background-color: red;
height: 25vh;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
it will make header visible.
and remove position:fixed from #bottom
#bottom {
background-color: blue;
bottom: 0;
height: 35vh;
width: 100%;
}
hope this will solve your problem
here is the working example http://jsfiddle.net/a3ru9d4d/
in this example I have added padding top in the container so that content inside the container will not hide behind the header.
I think you want something like this:-
*{margin:0;padding:0}
#container {
height:100%;
width:100%;
position:relative;
}
#top {
height:25vh;
width:100%;
background-color:red;
position:fixed;
top:0;
z-index: 1;
}
#content {
height:120vh;
width:100%;
background-color:green;
position:relative;
}
#bottom {
height:35vh;
width:100%;
position:relative;
z-index:-2;
background-color:#31353a;
}
<div id="top">
</div>
<div id="content">
</div>
<div id="bottom">
Footer
</div>
</div>
I hope it will helps you.
Take a look at this. I've introduced two new CSS definitions that achieve what I think you want.
https://jsfiddle.net/b8my8h5j/
I added z-index definitions. The higher the index, the higher it is in a non-static positioning stack. the content header has 30, so it appears above 20 for the content, but the footer has 10, so t's always at the back.
I added a margin-bottom to the content so that there's space for you to scroll down and have the footer be completely visible.
Update:
https://jsfiddle.net/b8my8h5j/1/
Also cleared padding/margin on the body and html tags so that the blocks fit together snugly.
Added a margin-top to the content so that the top of the green box is visible.
I think this produces what you want: z-indexes on all three, and making room at the bottom of content for the footer to show completely when you scroll to the end of the page
#container {
height:100%;
width:100%;
position:relative;
}
#top {
height: 25vh;
width: 100%;
background-color: red;
position: fixed;
top: 0;
z-index: 3;
}
#content {
height: 120vh;
width: 100%;
background-color: green;
position: relative;
margin-bottom: 33vh;
z-index: 2;
}
#bottom {
height: 35vh;
width: 100%;
background-color: blue;
position: fixed;
bottom: 0;
z-index: 1;
}
<div id="container">
<div id="top">
</div>
<div id="content">
</div>
<div id="bottom">
</div>
</div>
I have tried several things but my sticky header does not work. I've been trying several tutorials I found, but none worked. I have also looked at different post on stackoverflow but none described my problem.
Here's my HTML:
<div id='container'>
<div id='header>blabla</div>
<div id='actualpage'>bblablabal</div>
<div id='footer'>blablafooterblabla</div>
</div>
And here's the css:
html, body {
padding: 0;
margin: 0;
height: 100%;
}
#container{
background-color:white;
width:100%;
min-height: 100%;
height:100%;
}
#actualpage{
width:750px;
margin-left:auto;
margin-right:auto;
padding-bottom: 20px;
}
#footer{
margin-top:-20px;
clear:both;
height:20px;
background-color:#A6CE39;
padding-top:6px;
padding-bottom:6px;
min-width:100%;
bottom:0;
}
Thank you for your help!
You can add position: fixed or position:absolute (if you don't want the footer stick to bottom while scrolling) to your #footer:
#footer{
margin-top:-20px;
clear:both;
height:20px;
background-color:#A6CE39;
padding-top:6px;
padding-bottom:6px;
min-width:100%;
bottom:0;
position: fixed;
}
add position:absolute; to your #footer
and <div id='header> should be <div id='header'>
If you are referring to your footer, you may add position: absolute to your #footer
Fiddle
#footer {
margin-top:-20px;
clear:both;
height:20px;
background-color:#A6CE39;
padding-top:6px;
padding-bottom:6px;
min-width:100%;
bottom:0;
position: absolute;
}
#container{
background-color: yellow;
width:100%;
min-height: 100%;
}
#actualpage{
width:750px;
margin-left:auto;
margin-right:auto;
padding-bottom: 20px;
}
#footer{
margin-top:-32px;
clear:both;
height:20px;
background-color:#A6CE39;
padding-top:6px;
padding-bottom:6px;
min-width:100%;
}
<div id='container'>
<div id='header'>blabla</div>
<div id='actualpage'>bblablabal</div>
</div>
<div id='footer'>blablafooterblabla</div>
You need the footer outside of the container div.
Also, the bottom: 0; attribute was unnecessary and the negative margin for the footer needed to include the padding, which adds to the computed height
** also, add the closing "'" to id='header
tl;dr
See working CodePen: http://cdpn.io/KwzuA
or use Flexbox - see demo: http://codepen.io/astrotim/pen/PwYQOJ/right/?editors=010
Explanation
Using position for a sticky footer is typically not a good idea, as it removes the element from the document flow and can have undesired results of the footer overlapping the content when scrolling.
A tried and trusted method is to add a "push" div inside the wrapper div and then have the footer div below, outside the wrapper. Like this:
<div id="wrapper">
<header>
<h1>Header</h1>
</header>
<div id="body">
<p>Lorem ipsum...</p>
</div><!--#body-->
<div class="push"></div>
</div><!--#wrapper-->
<footer>
<p>Footer</p>
</footer>
For the CSS, you will need to set html, body and #wrapper with height: 100%. You then set a fixed height to your footer and apply the same height to #push. Then you offset the body with a negative margin-bottom. The #wrapper needs a few other properties, like so:
html, body {
height: 100%;
}
body {
overflow-y: scroll;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -160px;
}
.push, footer {
height: 160px;
}
footer {
/* remember the box model: padding+height */
padding-top: 15px;
height: 145px;
}
The footer will now flow properly when the content of the page extends below the fold, and will be sticky when the content does not.
** Use Flexbox **
The modern approach to this is using Flexbox. See: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
I used the Flexbox technique on a recent project
My Objective: To have a home page, that has a fixed, static footer. The easiest way to explain this is looking at this website, http://www.foxtie.com/. I'm trying to do something like what they have done with the fox, sticking with the footer, only, I'm wanting the entire footer to not ever move from the bottom of the actual screen.
My Code: I've changed, and unchanged, and re-changed it all. So I may be 20 steps farther than I was an hour ago. Here is what I have. (Bear with me, first post here, and I'm very rusty on the html/css).
Any help is appreciated.
The HTML:
<html>
<body>
<div id="container">
<div id="nav"></div>
<div id="content"></div>
<div id="footer">
<div id="imginthefooter"></div>
</div>
</div>
</body>
</html>
The CSS:
body {
height: 100%;
margin: 0px;
}
html {
background-color: #999;
margin: 0px;
height: 100%;
}
#container {
min-height: 100%;
background-color: #666;
position: relative;
}
#content {
overflow: auto;
background-color:#333;
}
#footer {
background-color:#000;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height:100px;
overflow: hidden;
}
#imginthefooter {
background: url(Images/Elk.png);
width:100px;
height:300px;
z-index:300;
bottom: 0px;
top: -108px;
right: -150px;
position: relative;
}
The link that Mr. Alien provided in his comment is for sticky footers. This is useful if you want the footer to appear at the bottom of the screen regardless of the amount of content on the page. What I think that you actually want is for the footer to always appear at the bottom of the page. Meaning that if you scroll down, the footer stays in place. If this is the case, you want the following code:
#footer {
position:fixed;
bottom:0;
left:0;
right:0;
width:100%;
height:100px;
}
The fixed positioning will place the footer at the bottom of the screen permanently. To add a fixed image within the footer, you will need both a relative div and absolute div. The following code is will get you what you want.
<div id="footer">
<div id="footerContainer">
<div id="imginthefooter"></div>
. . . Any additional footer elements go here . . .
</div>
</div>
#footer {
position:fixed;
bottom:0;
left:0;
right:0;
width:100%;
height:100px;
}
#footerContainer {
position:relative;
width:100%;
height:100px;
}
#imginthefooter {
background: url(Images/Elk.png) no-repeat;
width:100px;
height:300px;
top: -108px; /* Position element */
right: 150px; /* Position element */
position: absolute;
}
The relative container within the fixed element will allow you to position the elk image relative to that container.
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;
}