Please, consider the following jsFiddle - http://jsfiddle.net/mark69_fnd/hwCuB/ (you can find the code after the body of the question).
It represents a trivial example of the classic header, content, footer HTML layout. Notice that:
The content never overlaps with the footer. Resizing the window will finally create a vertical scrollbar rather than move the content over the footer.
There are no redundant scrollbars.
No absolute heights, except of the footer, which may be assumed to be no higher than 2em.
The content height is less than the available height between the header and the footer.
I would like to keep the first three properties, but change the last one, so that the content height is the full height between the header and the footer. And I would like to do so without resorting to javascript.
How can I do so, if at all?
EDIT
The given html and css are just an example. You are free to change them as long as the final result satisfies the conditions of my question.
EDIT2
Apparently, I am not very clear on what I want to achieve with the content. Here is what I have now:
Notice how the content does not extend the full height available to it between the header and the footer.
What I am after is this:
(edited in mspaint, I do not know to do it really)
EDIT3
Added an except clause to the 3rd condition:
except of the footer, which may be assumed to be no higher than 2em.
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.7.3/build/cssreset/reset-min.css">
</head>
<body>
<div class="container">
<div class="header">
Header goes here.
</div>
<div class="content">
<div class="innerWrapper">
Content goes here.
</div>
</div>
<div class="footer">
<div class="status">
Footer goes here.
<div>
</div>
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
width: 100%;
}
.container {
position: relative; /* needed for footer positioning*/
margin: 0 auto;
height: auto;
min-height: 100%;
background-color: #ddd;
}
.content {
padding: 0em 0em 2em; /* bottom padding for footer */
background-color: #bbb;
}
.footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */
}
.status, .header {
background-color: #999;
border: solid 1px #000000;
}
There might be couple ways to do this, but the only ways i can think of at the moment all involve setting/knowing the height of your header and footer.
Here is one using display:table http://jsfiddle.net/fLnkf/
There may be other solutions depending on if your requirements allow you to change your html or use CSS3.
hope this helps!
Related
I often use the method of an empty div to make my footer stay at the bottom of my page. The code idea is following:
<body>
<div id="canevas">
<article>My website's content</article>
<div id="push"></div>
</div>
<footer id="footer">Here my footer</footer>
</body>
The css:
html, body {
height: 100%;
margin:auto;
}
#canevas {
min-height: 100%;
height: auto;
margin-bottom: -33px;
}
#footer, #push {
height: 33px;
}
Today I'm looking for how to add a margin-top on my #caneva div without breaking the footer. Do you have any idea?
Note that my page's content can have many different size (a lot less and a lot more than 100% of the screen height).
Here a fiddle with previous code.
If using padding-top is an option, you could use box-sizing: border-box to calculate the width and height of the box including padding and border, as follows:
#canevas {
min-height: 100%;
margin-bottom: -33px;
padding-top: 50px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
WORKING DEMO.
Also it's worth noting that border-box value is supported on IE8+.
Alternatively, you could add another spacer element as the first child of the #canevas element to push down the content, as follows:
.spacer {
height: 50px;
}
<body>
<div id="canevas">
<div class="spacer"></div>
<article>My website's content</article>
<div id="push"></div>
</div>
<footer id="footer">Here my footer</footer>
</body>
This will have a promising browser support :)
UPDATED DEMO.
For further info, you could refer my answer on a similar question on SO here:
Position footer at bottom of page having fixed header
If what you mean is to keep the height of the page, then the answer is to also add margin-bottom: -63px; to your #caneva div. This way basically only the top of the '#caneva div' will change, the rest of the page will remain the same.
I created an updated fiddle here for you.
I want to print 30 pages with some data on top and some data on bottom.
My code looks like:
<...>
<div style="page-break-after: always">
<div>This should be on top1</div>
<div>This should be on bottom1</div>
</div>
<div style="page-break-after: always">
<div>This should be on top2</div>
<div>This should be on bottom2</div>
</div>
<etc>
I tried everything:
Positions: relative (no change), absolute (footer on first page only), fixed (on last page only)
Setting html, body, each div height to 100%. No idead why should I do this. Did not change anything
Maybe there is a way to force my browser (FF) to stick div to bottom of page?
Finally found an answer:
html,body MUST HAVE height: 100%;
There should be two types of div: outside (size of page), footer
For both set display: block;
For the outside set height: 100%; position: relative;
For the inside set position: absolute; bottom: 0px;
Voila!
Here is my complete code:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<style>
html,body
{
height: 100%;
margin: 0px;
}
body > div
{
height: 100%;
display: block;
position: relative;
}
body > div > div
{
position: absolute;
bottom: 0px;
left: 0px;
}
</style>
</head>
<body>
<div>
Page1
<div>Page1Footer</div>
</div>
<div>
Page2
<div>Page2Footer</div>
</div>
<div>
Page3
<div>Page3Footer</div>
</div>
</body>
</html>
Update
I played around a little bit with the code above and this may work easier than what I initially thought. (Note, there is potential for the footer to overlap content from the previous div, this could be resolved by adding a margin-bottom attribute to the content div equal to your custom footers set height - Also, if your page content is too long between page breaks, this will still have a couple scenarios that need attending). All that said, I tested locally and it worked as you desired.
CSS
<style>
#media print{
.footer{
position:relative;
top:-20px; // this sets the footer -20px from the top of the next
//header/page ... 20px above the bottom of target page
//so make sure it is more negative than your footer's height.
height:10px;//notice that the top position subtracts
//more than the assigned height of the footer
}
}
</style>
HTML
<body>
<div style="page-break-after: always">
<div>This should be on top1</div>
</div>
<div style="page-break-after: always">
<div class="footer">This should be on bottom of page1</div>
<div>This should be on top2</div>
</div>
<div class="footer">This should be on bottom of page2</div>
</body>
Original Answer
Unfortunately there is no easy way to do this. Browsers do not offer a means of creating custom headers and footers for printing.
Your best bet is to place information you want on every page in the title tag found in the <head><title>YOUR COMMON CONTENT</title></head> It's not going to be the prettiest. It comes down to your requirements.
The other option is to use #media print (CSS) coupled with javascript to dynamically calculate and insert page breaks/gaps of white-space while inserting divs(your custom footer and or header) at absolute positions for the known paper size. Then after the print event dynamically change the format back.
This works for me
Just add following css in your html file
#page {
margin-bottom: 40px;
counter-increment: page;
#bottom-right {
border-top: 1px solid #000000;
padding-right:20px;
font-size: 12px !important;
content: "Page " counter(page) " of " counter(pages);
}
#bottom-left {
content: "Footer content goes here.";
border-top: 1px solid #000000;
}
}
If you use the and elements for your header and footer
thead {display: table-header-group; }
tfoot {display: table-footer-group; }
Source: http://www.codeproject.com/Questions/247645/Print-html-table-into-A4-size
I creating an new layout for a personal website.
I'm using Twitter Bootstrap 3, and my initial layout was made using as exemple
the "Bootstrap with sticky footer" sample (http://getbootstrap.com/examples/sticky-footer-navbar/)
This is my html:
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Begin page navigation -->
<nav id="nav-container" class="navbar navbar-default container" role="navigation">
<div class="container">
<!-- Here I put a very normal Bootstrap 3 navbar -->
</div>
</nav>
<!-- Begin page content -->
<div id="main-container" class="container">
<!-- All my content goes here! -->
</div>
</div>
<!-- Begin page footer -->
<footer id="footer" class="container">
<div class="container">
</div>
</footer>
</body>
The Sticky Footer CSS:
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -100px;
/* Pad bottom by footer height */
padding: 0 0 100px;
}
/* Set the fixed height of the footer here */
#footer {
height: 100px;
}
And the custom style for my layout:
body {
/* Body's background will be grey */
background-color: #C0C0C0;
}
#main-container {
/* A box where I'll put the content will be white */
background-color: #FFFFFF;
}
#wrap {
height: 100%;
min-height: 100%;
}
#main-container {
min-height: 100%;
height: 100%;
}
This code generate this layout:
But, as you can see, the div #main-container don't grow 'till the end of the layout.
The div keep with the height of his content.
What I want is that this div always fills the entire page, like this:
Many solutions on internet said me to fix min-height to some tested value, but this way
I'll not be able to keep my website responsive (it's very important to me keep my layout
always responsive, that's the main reason I use Bootstrap 3).
Other solution goes to calculate the div height with javascript. Personally I don't like
this solution. I whish I could solve this only by using CSS.
Someone knows how to solve this problem?
As long as you are working on percentage, your site will be responsive. So using
min-height:100% does solve your problem which is just CSS. And if you don't want Javascript involved here, that is the way to go.
See the JS Fiddle DEMO. Your container is filling the entire page.
#main-container {
min-height: 100%;
background: #fff;
}
If you want to have sticky footer AND fullheight #main-container, you have to modify your structure. First, let me explain why you can't solve this with the sticky-footer method you're using right now:
Setting #main-container's height:100% or min-height:100% won't work because you can't use percentage height with a parent whose height is not strictly defined. Note that in the currently accepted answer this is considered a bug but it is not, it's just the way it is supposed to work. In your example #wrap's height is set to auto, so #main-container height just ignores the 100% and fallsback to auto.
To have both sticky footer and REAL fullheight #main-container (instead of faking with background) you have to use display:table and display:table-row. This works because when you use display:table, height:100% works just as your regular min-height:100% and the display:table-rows inside will always stretch to use all the vertical space available.
NOTE: this is different from using html tables, because in this case you don't need to bloat your markup with non-semantic tags, as you'll see in the following example.
Here's the example HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="maincontainer" class="astable">
<div id="header" class="astablerow">
header
</div>
<div id="middlecontainer" class="astablerow">
content
</div>
<div id="footer" class="astablerow">
footer
</div>
</div>
</body>
</html>
And here's the CSS
html, body{
margin:0;
padding:0;
height:100%;
}
.astable{
display:table;
height:100%;
table-layout:fixed;
width:100%;
}
.astablerow{
display: table-row;
}
#header{
height:30px;
background-color:#00ff00;
}
#footer{
height:30px;
background-color:#0000ff;
}
#middlecontainer{
background-color:#ff0000;
}
I think that min-height doesn't work due to a reported bug. See this: stackoverflow.com/questions/8468066.
An easy way to create the illusion that #main-container grows till the end, is to set #wrap's background-color the same value as #main-container's.
Here's my footer css:
.footer {
background-color: #CACACA;
font-size: 20px;
height: 50px;
padding-top: 10px;
position: absolute;
text-align: center;
width: 100%;
}
On multiple pages I have containers that content text. On some pages there is just enough content that the footer appears at the end of the page. But in some cases there isn't enough content so the footer still shows under the container but there is a gap between that and the end of the page. How can I fix this so it adjusts regardless of the length of the container?
like so
<!DOCTYPE html>
<html>
<head>
<title>My Amazing Footer</title>
<style>
html, body {
margin:0;
padding:0;
height:100%;
}
.wrapper {
min-height:100%;
position:relative;
}
footer{
background:#F1F1F1;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height:300px;
}
footer p{
text-align: center;
padding-top:100px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="Content">
<p>HTML Ipsum Presents</p>
</div>
<footer>
<p>© My Website 2013. All Rights Reserved!</p>
</footer>
</div>
</body>
</html>
see we have the footer in the wrapper and the footer is absolute to the bottom and left of the wrapper then we just add the height of the footer to the wrapper bottom padding and some default height on the wrapper and body and that's sorted, take a look on jsfiddle here - http://jsfiddle.net/eTwJh/2/ and here is one with no content - http://jsfiddle.net/eTwJh/3/
Without seeing the corresponding HTML, it's a bit hard to guess what your issues might be. It sounds like there's a bottom margin on your main content that's pushing the page bottom downward past the footer when there's only limited content inside that main section.
To fix it, either adjust that margin or else change the positioning of the footer. At the moment, the position is absolute, which means that the footer is positioned based upon the its parent element in the HTML. Switching the positioning to relative will make it appear just after whatever element comes just before it in the HTML.
I suggest you read more about CSS positioning before trying to work on the issue further.
EDIT 2:
There was an error in my code that was causing the footer to not stick to the bottom of the page. My code looked something like this:
<div id="footer">
<div id="copyright-bg" class="container">
<div class="row">
<div class="twelvecol">
<p class="copyright-text">Lorum Ipsum</p>
</div>
</div>
</div>
</div>
I removed <div id="footer"> and moved those CSS properties to id="copyright-bg" and it then began to stick properly to the bottom. But now there has risen another issue! I now have unnecessary scroll bars! Here is a Fiddle that has the barest of code to attempt to figure what is going on. I thought it could be the gradient but when I changed the code to a solid background the scroll bars still appeared.
Note: I have tested in Chrome and Firefox.
EDIT:
I have attempted to use the CSS Sticky Footer per instructions on the website.
I assume there is a conflict in my CSS(?) here is a Fiddle of the page.
I have also attempted what this website suggested and while it technically works it creates scrollbars! I would like to avoid that if possible.
Original Question
I am working on a page and if the page does not have much content (IE no scroll bars for the page) I am left with a black bar below my copyright container.
Here is a screenshot:
Note: Where you see the word Done is the bottom of my browser, an arrow is pointing to the black bar.
I have attempted a few things to remove the bar. When I add height: 100%; to the body tag it will take my background gradient and it will reach to the bottom of the page but again that doesn't look good. I then attempted to add height: 100% to the copyright container. That caused the gray area to stretch way down and cause excessive empty space and scrollbars. I have attempted to position the element absolutely but that causes several other issues and would prefer to avoid positioning absolutely.
How do I remove the black bar? (Preferably with just CSS but will accept an answer that uses jQuery/Javascript)
CODE:
HTML:
<!-- Body Content Is Here -->
<div id="copyright-bg" class="container">
<div class="row">
<div class="twelvecol">
<p class="copyright-text">Ipsum</p>
</div>
</div>
</div>
CSS:
html, body{
font-size:1em;
font-family: "ff-dagny-web-pro", Helvetica, Arial, sans-serif;
line-height:1.438em;
color:#222;
margin: 0;
padding: 0;
text-align: justify;
background: linear-gradient(to bottom, rgba(0,0,0,1) 25%,rgba(209,209,209,1) 100%);
/* Vendor Specific Background Gradients... */
}
#copyright-bg{
margin-top:1.875em;
background: none repeat scroll 0 0 #666666;
border-top: 5px solid #E31836;
padding:1.250em;
}
.container {
padding-left: 20px;
padding-right: 20px;
}
.row {
width: 100%;
max-width: 1140px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}
.row .twelvecol {
width: 100%;
float: left;
}
If you have tried multiple solutions (like Ryan Fait's footer or the CSS Sticky Footer (this link is broken, see this instead), which is my favorite) then I would bet that you have a bigger problem than face value. Those two examples have proven the test of time and yet still remain the most commonly used methods for creating a footer which sticks to the bottom of the page. While I'm not bashing your code, I would suggest that maybe you redo the page you're creating from scratch and have the first implementation be the sticky footer. From there you should just be able to copy and paste over your visual styles and if it screws up again then you know your culprit line of code.
EDIT:
I needed to edit your code a bit because the lack of indentation made it difficult to read. Here's the new jsFiddle. What I did change were a few things. Here's the additions to the top of your CSS code:
* {margin:0;padding:0;}
html, body {height: 100%;}
#content-wrap {min-height: 100%;}
Those lines are 100% necessary to make your code work. Not only do you need to do a wildcard (*) reset on all elements, but you also need to tell the document (html) and the body (body) to take up the full height of the screen. I don't remember if it was in your original CSS, but #content-wrap should have a min-height of 100% as well.
After searching through, I realize your footer isn't actually 180px in height, but rather 100px in height. Here's the final jsFiddle. And also, here's the final code to make the footer stick:
#main {overflow:auto;
padding-bottom: 100px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -100px; /* negative value of footer height */
height: 100px;
clear:both;}
You should see now that when you apply this code, the footer sticks to the bottom (and does so without duct tape). Hope this helps!
Majority of the sticky footer codes seem to cause issues with my page. To work around this issue I am using the following code:
HTML
<body>
<div id="page-content">
<header>
<!-- Header Content Goes Here -->
</header>
<!-- Page Content Goes Here -->
<footer>
<!-- Footer Content Goes Here -->
</footer>
</div>
</body>
JS
$(function() {
var height = $(window).height() - ($("header").outerHeight() + $("footer").outerHeight() );
$("#page-content").css("min-height",height+"px");
});
What this does is calculate the height of the page and set a minimum height for the page, thus sticking the footer to the bottom. It works beautifully.
Note: I am using HTML5.