Trying to implement "sticky" footer but its not working as planned. It throws it at the bottom and on first scroll it works as supposed to (except that it shows an inner-scroll bar). When scrolling back up, the stick footer doesn't disappear right away, it takes a few scrolls then it seems to go back to the "bottom". So my question is how do I keep the footer at the bottom at all times and eliminate the inner scroll bar. I am wondering if my absolute positioning is problematic on the main-content-inner. That div is expandable in height.
Here is the code:
<div id="page-wrap">
<div id="main-content>
<div id="main-content-inner></div>
</div>
<div class="footerpush"></div>
</div>
<div id="footer">copyright info</div>
#page-wrap {
width:100%;
min-height:100%;
height:auto;
height:100%;
margin-bottom:-20px;
position:relative;
overflow:auto;
}
#main-content {
width: 100%;
height:100%;
margin-left: -295px;
position:relative;
}
#main-content-inner {
left: 560px;
border-radius:8px;
border-style:solid;
border-width:2px;
border-color:#53D8FF;
padding:20px;
padding-bottom:0;
background-color:#000000;
position:absolute;
top:100px;
min-width:60%;
max-width:60%;
}
#footer {
text-align: right;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
color: #A7A9AC;
font-size: 12px;
height:20px;
}
.footerpush
{
height:20px;
}
If I remove overflow auto from page-wrap, the footer actually moves to the bottom of my page-wrap div. So it appears that because of my absolute main-content-inner being absolute, it is expanding outside of my wrapper? If I set a fixed value on the height of page-wrap, the footer moves to the bottom as it should. So this is the real question, how do I keep my footer at the bottom of the page even with expandable content?
Further research shows that when i set overflow to hidden on page wrap, that my absolute content "main-content-inner" gets cut off. How do I get the height of page-wrap expand to the height of main-content-inner, no matter what it is?
As I answered here, you can use http://www.cssstickyfooter.com/:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom: 150px; /* must be same height as the footer */
}
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
</style>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="main">
<div id="content">
<!-- Main content here -->
</div>
</div>
</div>
<div id="footer">
<!-- Footer content here -->
</div>
</body>
</html>
You can see a working example here: http://jsfiddle.net/dZDUR/
Resize the right-hand "Result" pane to be shorter/taller than the text
to see the scroll bar appear / disappear.
As per the CSS Sticky Footer how-to, you can insert your normal
'column' layout inside the main div.
Try this :
Rewrite your HTML code like this :
<div id="page-wrap">
<div id="main-content">
<div id="main-content-inner">
</div>
</div>
<div class="footerpush"></div>
<div id="footer">copyright info</div>
</div>
And rewrit your CSS file style properties :
html,body
{ height:100%;
padding:0;
margin:0;
}
#page-wrap {
width:100%;
min-height:100%;
position:relative;
overflow:auto;
}
#main-content {
background:#FF0;
padding-bottom:40px;
}
#main-content-inner {
border-radius:8px;
border-style:solid;
border-width:2px;
border-color:#53D8FF;
padding:20px;
padding-bottom:0;
background-color:#000000;
}
#footer {
text-align: right;
color: #A7A9AC;
font-size: 12px;
height:20px;
position:absolute;
bottom:0;
width:100%;
}
.footerpush
{
position:absolute;
bottom:20px;
height:20px;
width:100%;
}
Related
I've got the following setup:
header,
content - which needs to be full height of the browser,
and footer
The current setup below is how I want it (when the browser is opened fully). Basically the content div should have 100% height and you simply scroll to view the footer. The amount you scroll is based on the height of the footer. The content will be a simple login form. I've added in a div with a fixed height to demo my issue (The login div could be any height). However the problem is when the browser is resized vertically. This is the tricky bit to explain:
My question is how do I prevent the footer from overlapping the content div? I'd like the footer to snap to the bottom of the content div. As the browser window gets shorter, i'd like the content div to still remain 100% in height. The browser will cut the content div as it gets vertically shorter (which is fine) but I'd like the footer underneath the content div and still want to only be able to scroll to the height of the footer.
I think i'm missing margin-bottom somewhere but not quite sure where. Could someone please help with this issue. Thanks in advance.
the html:
<body>
<div class="wrapper">
<div class="content">
<div class="loginPanel">
</div>
</div>
</div>
<div class="footer">
footer, hidden until scrolled
</div>
</body>
the css:
html, body {
height:100%;
padding:0;
margin:0;
}
.wrapper {
height:100%;
background:orange;
}
.content {
background:grey;
width:100%;
height:100%;
}
.footer {
background:purple;
height:200px;
width:100%;
color:#fff;
}
.loginPanel {
width:600px;
height:300px;
background:green;
margin:0 auto;
}
You should be able to achieve what you want with the following:
html, body {
height:100%;
padding:0;
margin:0;
position:relative;
}
.wrapper {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.content {
background:grey;
width:100%;
min-height:100%;
}
.footer {
height:200px;
width:100%;
}
.loginPanel {
width:600px;
height:300px;
background:green;
margin:0 auto;
}
<div class="wrapper">
<div class="content">
<div class="loginPanel"></div>
</div>
<div class="footer">footer, hidden until scrolled</div>
</div>
You can try adding a margin-bottom to the <body> or <html> element; that should fix your issue.
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
I want a frame-like behavior, where I have a header (non-scrolling), footer stays at the bottom (non-scrolling), and in the middle to have two vertical divs. If content in these divs is too long for a window, they should show their own scrollbars - that is- no scrollbars in the body itself. I can't figure out how to make the div's width be: current-window-size - (footer + header). Is there a way to do it with CSS alone? (browser support needed IE9+)
HTML
<body>
<header>
<p>Header here</p>
</header>
<div> Something else here</div>
<main>
<div id="pane-1" style="background-color:#eee;">
Have your own scrollbar
</div>
<div id="pane-2" style="background-color:#ccc;">
Have your own scrollbar too
</div>
</main>
<footer style="background-color: #FFC;"> Footer here - should not scroll</footer>
</body>
CSS
html,
body {
overflow: hidden;
margin:0;
}
#pane-1,
#pane-2 {
display: inline-block;
vertical-align: top;
overflow: auto;
width: 49%;
}
footer {
height: 70px;
width:100%;
position: absolute;
bottom: 0;
}
Here is my code
http://codepen.io/anon/pen/tyvAe
Why not use the magic of semantic HTML and absolute positioning (note, background colors are used below to clearly show the various sections)
HTML
<header></header>
<section></section>
<section></section>
<footer></footer>
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
header, footer, section {
position:absolute;
width:100%;
}
header, footer {
height:50px;
background:red;
}
footer {
bottom:0;
}
section {
width:50%;
overflow:auto;
background:blue;
top:50px;
bottom:50px;
}
section:last-of-type {
background:yellow;
left:50%;
}
I don't know a realy good way to do this without Javascript, but here's mine with as little Javascript as possible (you'll need JQuery for this one):
http://jsfiddle.net/g13ogq2u/2/
Basically it's for the CSS:
html {
height:100%;
width:100%;
}
body {
width:100%;
height:100%;
margin: 0px;
padding: 0px;
background-color: #ffffff;
}
.header {
width:100%;
height: 50px;
min-height:50px;
padding:0px;
background-color:#CCAA00;
}
.page {
min-height: 100%;
height: auto !important;
/*Cause footer to stick to bottom in IE 6*/
height: 100%;
margin: 0 auto -70px;
/*Allow for footer height*/
vertical-align:bottom;
}
.content {
height:100%;
width:100%;
margin:0;
position:relative;
overflow:hidden;
}
.subContent {
height:100%;
width:50%;
min-height:100%;
margin:0;
float:left;
overflow:auto;
}
#subContentA {
background-color:#EEEEEE;
}
#subContentB {
background-color:#CCCCCC;
}
.pushFooter {
height: 70px;
/*Push must be same height as Footer (including its paddings) */
min-height:70px;
}
.footer {
height: 70px;
/*Push must be same height as Footer */
min-height:70px;
width:100%;
padding:0px;
margin:0px;
background-color:#FFFFCC;
position:relative;
overflow:hidden;
}
The little JQuery code is:
$.fn.doFitSize = function () {
var dHeight = $(window).height();
var hHeight = $(this).prevAll().outerHeight();
var fHeight = $(this).nextAll().outerHeight();
var cHeight = dHeight - hHeight - fHeight;
$(this).height(cHeight);
}
$(document).ready(function () {
$('.content').doFitSize();
});
$(window).resize(function () {
$('.content').doFitSize();
});
And the HTML would be:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
/* add mentioned style here */
</style>
<script src="jquery-1.9.1.js" type="text/javascript" ></script>
<script type="text/javascript">
/* add mentioned script here */
</script>
</head>
<body>
<div class="page">
<div class="header">
<span>this is the header</span>
</div>
<div class="content">
<div id="subContentA" class="subContent">
<span>This is the left content.</span>
</div>
<div id="subContentB" class="subContent">
<span>This is the right content</span>
</div>
</div>
<div class="pushFooter"></div>
</div>
<div class="footer">
<span>And this is the footer</span>
</div>
</body>
</html>
Hope it helps ;)
You can do this with css...
#pane-1, #pane-2 {
width: 200px;
height: 200px;
overflow: scroll;
}
Depending on what you need, you may also like to play with css property: max-height in place of height.
My HTML looks like the following, without the content though as the following is only needed to answer my question:
<html>
<body>
<div class="container">
<div class="socialmedia"></div>
<div class="navbar"></div>
<div class="mainbody></div>
<div class="footer"></div>
</div>
</body>
</html>
I've been trying to get my footer to remain at the bottom of my webpage, beneath .mainbody. The problem though, is that the footer seems to sit at the bottom of my window only, not at the bottom of the webpage which could extend well below my actual window when I have a lot of content. Right now, I have all the div's above set to position "absolute"; as well the html and body are styled in the following way:
html, body{
height:100%;
margin:0;
padding:0;
}
html { background: url(/img/multiblock.png)repeat center center fixed; }
}
Now, the only way I can get my footer to remain at the bottom of the webpage is to set top:-3998px (or whatever the height of my largest window is). Obviously this won't work once a webpage has enough content on it to expand it past that height. If I set position to relative, it appears at the top of my whole webpage and when positioned absolute it appears at the bottom of the viewable window only. You can check out the website at http://www.edmuncovered.com to see what I mean or to check the rest of the code. Parts of my website include adding content every day or so so I want to make sure the webpage can increase in height with added content, but that the formatting stays the same and the footer obviously stays at the bottom. Any ideas?
I guess this is what you need...
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;
}
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
You can try something like this:
CSS:
.socialmedia, .navbar, .mainbody, .footer
{
border: 1px solid grey;
margin-top: 5px;
width: 800px;
}
.socialmedia
{
height: 20px;
}
.mainbody
{
min-height: 980px;
}
.footer
{
height: 25px;
}
Html:
<div class="container">
<div class="socialmedia">Social Media</div>
<div class="navbar">Navbar</div>
<div class="mainbody">Mainbody</div>
<div class="footer">Footer</div>
</div>
Working jsFiddle: http://jsfiddle.net/LrfXr/
I'm going to assume this is a questions similar to the one here: How to Stop Sticky Footer at Content DIV
At which there are a few good answers.
Links on that page:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
http://twitter.github.io/bootstrap/examples/sticky-footer.html
Basically you're looking for a footer that attaches itself to the bottom of the viewport but also extends should the content push it off the viewport. Martin Bean and Ryan Fait have the best methods of this. The bootstrap's method is a variation of this method too.
Happy hunting.
Here is the jsFiddle link. Followings are your css and html code:
HTML code
<div class="container">
<div class="socialmedia">Social Media</div>
<div class="navbar">Navbar</div>
<div class="mainbody">Mainbody</br>Mainbody</br>Mainbody</br>Mainbody</div>
<div class="footer">Footer</div>
</div>
CSS
*{
margin:0;
padding:0;
}
body {
background-color:#E4E2E2;
color:#fff;
}
.container {
min-height:100%;
/*position:relative;*/
}
.socialmedia {
background-color:#186301;
padding:10px;
}
.navbar {
background:#A60206;
padding:10px;
min-height:30px;
}
.mainbody {
padding:20px;
background-color:#6D0594;
}
.footer {
position:absolute;
bottom:0;
padding:2%;
background-color:#000;
width:96%;
}
This is working for me:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
In short, use this:
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
HTML
<html>
<head>
<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>
</div>
</body> </html>
I am using two column layout.One for Main content and one for sidebar
In html I am using the following code
<div id="content">
<div id="main-content">
-----------
-----------
</div>
<div id="sidebar">
-----------
----------
</div>
</div>
<div id="footer">
----------
----------
</div>
CSS file Consist of the following code
#content
{
padding-top:100px;
padding-bottom:50px;
width:1000px;
margin:0px auto;
}
#main-content
{
width:720px;
padding-top:250px;
padding-bottom:30px;
padding-right:20px;
position : absolute;
}
#sidebar
{
float:right;
width:270px;
padding-top:250px;
padding-bottom:30px;
}
#footer
{
background: url(../images/footer.jpg) repeat-x;
width:100%;
clear:both;
margin:auto;
}
The footer code is displaying in the middle of the page , probably at the end of the sidebar
you can see here. Footer is in Black color.
Remove position: absolute in #main-content CSS. You don't need it. If you absolute position an element, then this is out of the document flow.
In this case, if you set position: absoulte in #main-content, its height is ignored to render the footer.
Remove padding-right: 20px and position: absolute properties from div.#main-content
I have tow pages of html that contain a footer. I want to stick the footer to the bottom of the page in both pages. It works fine when the page does not have vertical scroll but when the content is a lot and page has scroll footer stands over my contents. Here is my page layout:
<body>
<div id="container">
<div id="header"> Header </div>
<div id="menu"> Menu </div>
<div id="content"> Content </div>
<div id="footer"> Footer </div>
</div>
</body>
and here is my css:
html, body
{
width:100%;
margin:0;
}
#header, #menu, #content, #footer
{
border:thin solid #000;
}
#content
{
width:70%;
margin: 0 auto;
height:100%;
}
#footer
{
position:absolute;
bottom:0;
width:100%;
background-color:#06F;
}
Change your CSS like;
#footer{
width:100%;
background-color:#06F;
}
Here is a working Live Demo.
and if you want the footer stick to the bottom, no matter the content is, try;
#footer{
width:100%;
background-color:#06F;
bottom:0;
position: fixed;
}
But define a height to your footer and add the same amount of padding-bottom to your content, otherwise some text may be hidden by footer
Here is a working Live Demo.
#footer {background-color: #0066FF;bottom: 0;position: absolute;width: 100%;bottom:0px;}
body,html {height:100%}
by this way you will get your output
You can try this
#footer {
background-color: #0066FF;
width: 100%;
}