I went through so many posts since many days but didnt find anything useful. I am developing a website using bootstrap. I have created footer but it does not work correctly on all the pages either it comes in between on one or other page or in some page leaves space on the right. I tried jquery also but no success.
I want to create a footer like the one on stackoverflow which always stays at bottom on all the pages and we can see it when we scroll till last. I have footer on main master page and the rest pages are child master and child pages.
<div class="footer navbar-fixed-bottom">
<div class="container text-right">
<div id="socialMedia">
</div>
</div>
</div>
.css
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
margin: 0;
padding:0;
min-height: 100%;
margin-bottom:-50px;
}
.footer {
position: absolute;
right: 0;
bottom:0;
left: 0;
padding:0;
background-color:#333;
width:100%;
height:50px;
margin-bottom:0px;
}
Simply not make the footer absolute, but relative like this:
.bodyContent {
position:relative;
padding:20px;
margin-bottom:50px;
}
.footer {
position: relative;
background-color:#333;
width:100%;
height:50px;
margin-bottom:0px;
}
Here your code plus the fix on JSFiddle.
Found the snippets here works really well for bootstrap
Html:
<div id="wrap">
<div id="main" class="container clear-top">
<p>Your content here</p>
</div>
</div>
<footer class="footer"></footer>
CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
}
Source: Demo and Tutorial
Related
This question already has answers here:
Footer below content, but not floating mid-air if not enough content
(6 answers)
Closed 7 years ago.
I have to set the footer on the bottom but in the way I'm using it's always at the bottom even if the page content is bigger than the screen.
If the content its bigger than the screen I would like to have to scroll in order to see the footer.
.fijo{
bottom: 0;
position: fixed;
width:100%;
}
You need to use a sticky footer.
HTML
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
CSS
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
Easy one, just use the following CSS code
#footer {
position: absolute;
bottom: 10;
left: 0;
}
The ID of the footer should of course be "footer" in order for this to work, or rename it to whatever you like.
Hope this helps :)
Here is the solution
Demo
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ffff00;
padding:20px;
text-align:center;
}
#content {
padding-bottom:50px; /* Height of the footer element */
text-align:center;
}
#footer {
background:#00ffff;
width:100%;
height:50px;
position:absolute;
bottom:0;
left:0;
text-align:center;
}
HTML:
<div id="wrapper">
<div id="header">Header is here</div>
<div id="content">Content is here</div>
<div id="footer">Footer is here</div>
</div>
If you are using HTML5 in combination with Twitter Bootstrap or any other template, or even pages built from scratch, you can also apply it directly on the footer element with no additional ID or class selectors required using the code #pzp provided above:
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
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
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>
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)