I´m trying to solve a problem but I´m not having sucess.
My footer if the content of the site and filled it in the footer is usually at bottom, but if I have few content on a page footer rises and as I have 2 different footers, and the last footer is white and then I have a huge blank space under my second footer.
I´m trying to find a solution that when I have few content on a page my two footers climb, but without white space at the bottom.
After my second footer I just want the end of the page and not a huge blank space.
I already have tried to do in css on my footer bottom: 0, position: fixed, but so far I´m not having success for my purpose.
Anyone had this problem? Can you give a help?
My jsfiddle with my example
http://jsfiddle.net/ritz/wzex4/
My html:
<footer id="footer-container">
<section id="footer1">
<div id="col">
<h1>Newsletter</h1>
<ul>
<li class="home"><i class="fa fa-home"></i> Write your email</li>
</ul>
</div>
</div>
</section>
<section id="footer2-container">
<div id="footer2">
<p>© copyright</p>
</div>
</section>
</footer>
My css:
#footer-container
{
width:100%;
float:left;
background:#ccc;
margin-top:15px;
bottom:0;
}
#footer1
{
width:960px;
margin:10px auto 0 auto;
height:165px;
}
#footer2-container
{
width:100%;
height:60px;
float:left;
background:#000;
bottom:0;
margin-top:15px;
}
#footer2
{
width:960px;
margin:15px auto 0 auto;
}
#footer2 p
{
color:#fff;
font-size:14px;
}
What I´m getting:
Add position: absolute; in your #footer2-container
Working Fiddle
this is a common problem because the most common workarounds for this are kind of tricky.
You should not use position fixed because in that case the footer will always be on the screen.
If you position absolute the footer to the bottom and give height of html and body as 100%, whereas the content (in a container) gets padding-bottom the size of the footer so that if content is more it should not overlap.
Here's how I deal with it:
html, body {
height: 100%;
}
.container {
padding-bottom: 20px; /* if your footer height is 20px including paddings and margins */
}
.footer {
position: absolute;
bottom: 0px;
}
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;
}
This question already has answers here:
Make footer stick to bottom of page correctly [duplicate]
(10 answers)
Closed 8 years ago.
I cannot make a footer sticky in the bottom of the page. I have read dozens of tutorials and still have a problem. In pages with contents that cover all the window, the footer is sticked in the bottom without a problem. But in pages without a lot of content, the footer is in the middle of the page.
<html><body>
text here text here
<footer id="footer">
Im in the footer and bottom of the page!
</footer>
</body></html>
body {
background: url('/static/img/bg.png');
min-width: 1300px;
height: 100%;
}
footer {
clear: both;
padding-top:20px;
padding-bottom:20px;
background-color:#222;
margin-top: 15px;
color: white;
text-align: center;
}
I have tried to add position:absolute or position:fixed and bottom:0px in the footer, but then the results are worst. There is a blank space after footer.
You can use position:fixed and bottom:0px; like this:
footer {
clear: both;
padding-top:20px;
padding-bottom:20px;
background-color:#222;
margin-top: 15px;
color: white;
text-align: center;
position:fixed;
bottom:0px;
width:100%;
}
The footer remains at the bottom no matter how much content the body has.
To remove white spaces around it and make it's width 100% you need to remove margin and padding:
body,html {
background: url('/static/img/bg.png');
width:100%;
height: 100%;
padding:0;
margin:0;
}
JSFiddle Demo
You can try this
html, body {height: 100%;}
#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;/
}
This an HTML
Below is the basic structure of the HTML code. You'll notice how the footer sits outside of the wrap .
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
You would place your content elements inside the main . For example, if you were using a 2 column floating layout you might have this;
<div id="wrap">
<div id="main">
<div id="content">
</div>
<div id="side">
</div>
</div>
</div>
<div id="footer">
</div>
A header could be placed inside the wrap but above the main like this;
<div id="wrap">
<div id="header">
</div>
<div id="main">
</div>
</div>
<div id="footer">
</div>
I'm making some mobile HTML & would like to have a div that uses up 100% of the space it has, but not use up its container and in it have 3 divs that split it up into 3 parts and have the following layout:
How can I do this using divs, I've tried to but having percentage and fixed height divs is confusing. I can do it with horizontally aligned ones, but vertically it confuses me. I don't want it to overlap by making the bottom one absolute.
Edit
The remaining space is essentially just one big div that has an overscroll-y that uses up the whole space
I have to place the layout in the section underneath the titlebar which is why I cant use position: fixed because it will interfere with the parent container.
First of all, the image in your edited question probably came from JQuery Mobile. Consider using jQuery mobile. It could be an option too.
<style type="text/css">
#container{position: relative; width: 100%; height: 100%; background-color:#ddd; z-index:1;}
#header{position: fixed; top:0; left:0; width:100%; height: 80px; background-color:#f30;z-index:3;}
#footer{position: fixed; bottom:0; left:0; width:100%; height: 80px; background-color:#f30;z-index:4;}
#content{width:100%; z-index:5; padding-top: 90px; padding-bottom: 80px;}
</style>
<div id="container">
<div id="header">
</div>
<div id="content">
Put body content here...
</div>
<div id="footer">
</div>
</div>
You might need jQuery to spice it all up. This should give you the basic idea.
http://jsfiddle.net/wy6rS/1/
<div id="toolbar">This is fixed toolbar.</div>
<div id="wrap">
<div id="header">This is the header</div>
<div id="content">Content will Expand with scripting. Notice the push.</div>
<div id="push"></div>
<div> <!--wrap ends here-->
<div id="footer">This is the footer</div>
The push makes room for the sticky footer. Notice equal negative margin on #wrap.
#wrap { width:100%; min-height:100%; height:100% !important; margin-bottom:-80px; margin-top:50px; }
#toolbar { position:fixed; top:0; width:100%; height:50px; }
#header { height: 140px; }
#content { min-height:300px; height:100%; }
#push, #footer { height:80px; } /* Must be same height as footer */
Then you'll need script to expand the content. Check the jsfiddle. It will work in a real page.
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%;
}
If got a very basic layout, with a header, content container and a footer.
What i need done, is to make my content container size up, so that the whole layout will fit on the screen. (unless the text in the content container extends this of course).
I've tried assigning a height 100% value to my body, and from there assigning my content containers height to 100% aswell, but that results in making my content container size up to the height of the full screen.
Before that i had the height on the content container set to auto, which of course resulted in the page not being long enough, if a visitor with a bigger screen size than the layout, viewed the page.
Here is a part of my code:
HTML:
<body>
<div class="background"></div>
<div class="page">
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</body>
CSS:
html, body {
height:100%;
margin:0;
padding:0;
}
.page {
position:relative;
height:100%;
z-index:1;
}
.content {
position:relative;
width:850px;
height: 100%;
margin: 0 auto;
background: url(images/content.png) 0 0 repeat-y;
}
I think this what you need (the footer will be always sticked to the bottom)
CSS
html, body {
margin:0;
padding:0;
height:100%;
}
.page {
min-height:100%;
position:relative;
}
.header {
background:#00ff0f;
padding:30px;
}
.content{
padding:10px;
padding-bottom:45px; /* Height+padding(top and botton) of the footer */
text-align:justify;
}
.footer {
position:absolute;
bottom:0;
width:100%;
height:15px; /* Height of the footer */
background:#00ff0f;
padding:10px 0; /*paddingtop+bottom 20*/
}
.content {
height:100%; // IE HACK
}
HTML
<div class="page">
<div class="header">Header</div>
<div class="content">
Some Content Here...
</div>
<div class="footer">Footer</div>
</div>
Tested in all major browsers.
DEMO.
What you really want is a sticky footer, no? You can style the other elements to give the illusion that the #content element is bigger than it really is.
http://ryanfait.com/sticky-footer/