I am re-writing this question to better convey the problem:
I have 3 output mechanisms:
Screen
PDF
Print
PDF's are generated using the same media type as screen.
On screen: I just want the footer to appear below the content ... Simple... easy!
PDF: I want the footer to display at the bottom of the last page of the content
Print: As above, I want the footer to display at the bottom of the last page of the content
The problem is: If I set absolute positioning for media type=print there are two problems:
This has no effect of the PDF display
If the content spans over multiple pages, the content prints under the footer which is fixed at the bottom of the first page.
If on screen - I need footer to display at the bottom of an imaginary page so that when the pdf is generated, it appears at the bottom of the last page of content
If on print - I need footer to display at the bottom of the last page of content
You can define 2 stylesheets for the page; 1 for "screen" and 1 for "print". Link to them this way:
<LINK rel="stylesheet" type"text/css" href="screen.css" media="screen">
<LINK rel="stylesheet" type"text/css" href="print.css" media="print">
This way you have total separation of how each device should render your page.
You should definitely check out http://www.cssstickyfooter.com/. It's an excellent, modern "sticky footer" solution. At a minimum, it should help lead you in the right direction.
You can achieve this by having a separate CSS stylesheet for printed documents. CSS Media Types allow you specify separate rules for printed documents (and many other representations).
If this is the only style that needs special handling then you can put the print style in your existing stylesheet like this:
#footer { position: static; }
#media print {
#footer { position: absolute; bottom: 0; }
}
If you have a lot of print-specific rules, put them in a separate stylesheet and include both stylesheets in your HTML like this:
<link rel="stylesheet" type="text/css" href="all.css">
<link rel="stylesheet" type="text/css" media="print" href="printonly.css">
When displayed on the screen only the all.css stylesheet will be used; when printed both the all.css and the printonly.css stylesheet will be used — so you don't need to duplicate your styles in both files, just add printer-specific ones to printonly.css.
Useful reference:
http://www.w3.org/TR/CSS21/media.html
Use a single container css class.
Add the footer to the end after header & body containers.
Set the container height to 100% & the footer class will appear at the bottom.
I think what you might be looking for is the CSS Sticky Footer
Ultimately your footer needs to be outside of your wrapper
Page
<div id="wrap">
<div id="main"></div>
</div>
<div id="footer"></div>
CSS
/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/
* {margin:0;padding:0;}
/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
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 {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
/* IMPORTANT
You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
*/
Taken directly from the cssstickyfooter website.
I posted my answer before the OP edited his answer to explain that he was looking for print.
Related
I am very new to HTML and CSS and whilst playing around with web design found a very annoying issue - I am trying to create a fixed header (to make a navigation bar) but...
When the screen is minimised with the position:fixed property value pair in CSS, the horizontal scroll bar does not appear.
To see what I mean, take a look at the code below: opening the html as it is and minimising your browser would create a horizontal scroll bar just fine, but take away the /* */ comment signs in the CSS and all of a sudden this scroll bar stops appearing and all hell breaks loose with positioning.
HTML
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div></div>
</body>
</html>
CSS
body {
min-width:1000px;
}
div {
width:100%;
height:100px;
background-color:black;
/* position:fixed; */
}
Any help on how to solve this issue would be greatly appreciated, thanks,
Philip.
if you need horizontal scroll always: just add overflow-x: scroll; to body in css.
or you may specify sizes of the screen when it is on with #media:
#media (max-width: 1000px) {
body {
overflow-x: scroll;
}
}
When you use position:fixed in a container, the whole container is taken out of the normal flow. So the things that normally affect elements in the normal flow will not affect it. (The absolute positioning behaves the same way, by the way). I tweaked your code a bit so you can see this. Try playing around with it, and hopefully you'll see something. Try uncommenting position:fixed in CSS, then the new div in HTML, and then top:100px (this pushes the div 100px downward) in CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div class="header">I am the header.</div>
<!-- <div>
<p>I am a paragraph in another div. I am a paragraph in another div. I am a paragraph in another div. I am a paragraph in another div. I am a paragraph in another div. I am a paragraph in another div. I am a paragraph in another div. I am a paragraph in another div. I am a paragraph in another div. I am a paragraph in another div. I am a paragraph in another div. I am a paragraph in another div. I am a paragraph in another div.</p>
</div> -->
</body>
</html>
CSS
body {
min-width:1000px;
color: green;
}
.header {
color: orange;
width:100%;
height:100px;
background-color:black;
/*position:fixed;*/
/*top: 100px;*/
}
I have trouble to create a page with full screen div with h1 element.
Following page is rendered correctly by IE and Chrome as expected: Contains Red full-screen div, no scroll-bars:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>title</title>
<style>
html {
background-color: purple;
}
body {
background-color: blue;
height: 100%;
margin: 0;
}
#main {
background-color: red;
min-height: 100%;
}
</style>
</head>
<body>
<div id="main">
<h1>
some text
</h1>
</div>
</body>
</html>
But, for the Firefox (27.0.1) I found:
show purple line at the top of the page
and vertical scroll-bar
if I add some text directly to #main div before h1 element, then page renders as expected.
What I should do to render it correctly in FireFox with text in h1 only ?
Following page is rendered correctly by IE and Chrome as expected: Contains Red full-screen div
If that’s what you get, then that can only be in Quirks Mode, I suppose – because you forgot to set height:100% for html as well, and without that the percentage height for body is not supposed to work that way.
And with a correct Doctype set (and height for html), you get the same result in all standards conform browser – the one you think is wrong: http://jsfiddle.net/q6g8Q/1/
It’s actually correct though, because of adjoining margins – the default margin-top from the browser stylesheet for the h1 adjoins the margin-top of the div – and therefor it gets pushed down accordingly.
So set the margin-top of the h1 to zero, and the “problem” is gone – http://jsfiddle.net/q6g8Q/2/
You have to reset the css of your browser. Just add this to the top of your css :
* {
margin: 0;
padding: 0;
}
// #main h1 { margin:0; } // this snippet will be enough for your case, but with the other you remove every margin and padding made by the browser.
demo JsFiddle
If you want more info about this tricks, read this article by Chris Coyier.
If you want a full css reset, you should consider the Reset Reloaded.
change the line-height or margin padding. That should do the trick. play around with some big numbers ;)
I've made website with bootstrap fixed navbar. It has fixed navbar so in stylesheet body have top-padding of 70px.
When i print the page it add that extra space at top of paper. What can i do to remove that extra space causing by that top-padding.
Below is print preview with padding
Below is print preview without padding which i want with less space at top.
If i remove the padding the print is as i want but the in browser the content get behind the nav bar and i can't see the first 2-3 lines.
Please give me some solution to retain the fixed navbar and also the padding don't get include in print.
Add a new print stylesheet like so (place this after your main stylesheet):
<link rel="stylesheet" href="/css/print.css" media="print">
In print.css set your new CSS rule for the body tag like so:
body {
margin-top: 0;
}
I know you may or may not want to show the navbar in print. I wanted to show it, so I added this in my CSS (Bootstrap 3):
#media print {
.navbar {
display: block;
border-width:0 !important;
}
.navbar-toggle {
display:none;
}
}
The accepted answer works perfectly, but if you don't want to add a new style sheet, an alternative is to wrap the body padding in a media tag. In your Site.css:
#media screen {
body {
padding-top: 50px;
padding-bottom: 20px;
}
}
This specifies that the style should only be applied when viewing the page, not printing.
I'm doing some work for http://digitaleditor.com/ and I've run into something a tad confusing.
The web page has a horizontal scroll bar at the bottom, but I've been unable to figure out why. Using Google Chrome's developer's tools I've found that there are only 3 items on the entire page that exceed 960 pixels wide. The first two are html and body, the second is #hpages, however the second is only 970 pixels wide (html and body are each 1263 pixels wide). Furthermore there's a very obvious CSS rule stretching #hpages to 970 pixels:
#hpages ul { width:970px; float:right; }
I can find no such rule stretching the html or body elements. I tried running the following script to see if there were any elements I was simply overlooking that might be stretching the page:
javascript:widest=null;$("body *").each(function(){if(widest==null)widest=this;else if($(this).width()>$(widest).width())widest=this;});alert(widest.id);
This returned #hpages, meaning that no item is over 970 pixels wide in the body (even though the body is stretched to 1263 pixels).
There are no CSS rules affecting the width of the body element or the width of the html element.
I'm honestly just at a loss as to what is stretching the page, and I don't know how to figure out. At this point my last resort is systematically removing items from the page until it's resolved. I was wondering if anyone knew a better option.
It's the width on the iframe in .wrapper>#page>#content>#sidebar.rightSidebar.left>center>div>#fb-root>div>div>iframe#f1c73bf2defcb8
It has an inline style of width: 575px; which is overflowing. Either fix the width or add overflow: hidden; to this div <div style="position: absolute; top: -10000px; height: 0px; width: 0px;">
In the page you have a link to:
<link rel="stylesheet" href="http://digitaleditor.com/wp-content/themes/couponpress/template_couponpress/styles.css" type="text/css" media="screen" />
In that page there is:
/* ===================== _HEADER STYLES ======================== */
#hpages ul { width:970px; float:right; }
#hpages ul li { float: right; padding-right: 10px; margin-right: 10px; border-right: 1px solid #333; }
Not sure, but maybe having the margin-right on the li may be causing them to overflow. You may want to overwrite this style with CSS on your page. Not sure if you have access to do so, but that may be an option.
Remove position:relative; from .wrapper
I have a problem with fixing the footer to the bottom of the browser .. The problem is when resolution changes or windows resizes the footer content overlaps the content of the website, here is the current css for footer div
div.footer {
position:absolute;
bottom:0px;
}
Does anybody knows how can I fix this? Thank you
UPDATE:
This is what I need exactly but for some reason it doesn't work for my web page, it does work when I cut paste code to the blank page, but since my page is full with content and everything, what are the important elements to include? Hereis the url.
The above trick works only if my website has filled content if I have some lets say few lines the above trick doesn't work.
UPDATE II
My website has dynamic content so I think can't use this sort of CSS Sticky footers because sometimes the website will just have few lines sometimes be packed with content. Thats why the footer is not sticking to the bottom of the webpage.. its not problem to stick the footer if there is plenty content on the website the problem is without.
What you have here is a common problem for which there is no common answer, but what I would try if I were you since all these above suggestions apparently aren't working, I'd try to set my page container background to any color let say white (#FFFFFF) and I'd set background color of body to any other then white let say grey (#CCCCCC). And finaly set footer position to relative and of course it must be placed after everything if you want it alway to be at the bottom. This way you'll get what you need 100 % sure if you follow step by step instructions.
Checkout CSS Sticky Footer for an excellent cross-browser compatible method.
What that site essentially does is make the footer stick BENEATH the browser edge, and gives it a negative margin that has the same value as the footer's height. This way, the footer is sure to stick to the bottom.
You can add a push div to the last element before the footer in order to always assure that the footer doesn't overlap the content.
Given this example:
<html>
<body>
<div class="header" />
<div class="content" />
<div class="footer_push" />
<div class="footer" />
</body>
</html>
If <div class="footer" /> is always 75px high, use the following CSS:
html, body { height: 100%; } /* Take all available vertical space */
/* Push the bottom of the page 75px.
This will not make scrollbars appear
if the content fits already. */
.footer_push { height: 75px; }
/* Position the footer */
.footer { position: absolute; bottom: 0; height: 75px; }
Basically you need to give the footer a fixed height and to push the footer with another div of the same height to the bottom. There's however more browser specific stuff which you need to take into account:
The html and body must besides having a height of 100% no (default) margin to avoid the footer being pushed further to below that amount of margin.
The p and div elements throughout the page must have no margin-top to avoid the footer being pushed further to below that amount of top-margins in under each Firefox.
The "container" div must use min-height of 100% instead of height to avoid the footer to overlap the remaining of the content. IE6 which doesn't know min-height just works fine with height, so you'll need to add a * html hack for this.
All with all, here's an SSCCE, just copy'n'paste'n'run it:
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<title>SO question 1900813</title>
<style>
html, body {
margin: 0;
height: 100%;
}
p, div {
margin-top: 0; /* Fix margin collapsing behaviour in FF. Use padding-top if necessary. */
}
#container {
position: relative;
min-height: 100%;
}
* html #container {
height: 100%; /* This is actually "min-height" for IE6 and older. */
}
#pushfooter {
height: 50px; /* Must be the same as footer height. */
}
#footer {
position: absolute;
bottom: 0;
height: 50px;
}
</style>
</head>
<body>
<div id="container">
<p>Some content</p>
<div id="pushfooter"></div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Edit: after more testing I realized that this indeed does not work in IE8 (I still consider it as a beta so I didn't really use/test it, sorry about that), unless you let it render in IE7 compatibility modus (insert sad smilie here) by adding the following meta tag to the <head> (which I already added to the SSCCE here above):
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
or to let it render in quirks mode by using a "wrong" doctype (either remove the <!doctype> or pick one of the doctypes associated with painfully red Q boxes in IE here). But I wouldn't do that, that has more negative side-effects as well.
And, surprisingly, the http://www.cssstickyfooter.com site as someone else here mentioned here which used an entirely different approach also did not work in IE8 here (try to resize browser window in y-axis, the footer won't move along it as opposed to other browsers, including IE6/7). That browser keeps astonishing me. Really.
Try setting the footers Position to relative and playing around with a negative top margin to get it how you want it.
What you're looking for is a Sticky Footer, you can find a lot of resources like this one: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
try this:
#wpr{
display: table;
height: 100%;
width: 100%;
}
.dsp-tr{
display: table-row;
}
.dsp-tc{
display: table-cell;
}
#ftr-cnr{
text-align: center;
vertical-align: middle;
}
#ftr{
background-color: red;
padding: 10px 0px;
font-size: 24px;
}
<div id="wpr">
<div class="dsp-tr">
<div class="dsp-tc">
body
</div>
</div>
<div class="dsp-tr">
<div class="dsp-tc" id="ftr-cnr">
<div id="ftr">
footer
</div>
</div>
</div>
</div>
display: table does not make it a table, a <div> is still a <div>, it just tells the browser to display it as table.
i tested it in chrome and firefox
let me know if it works for you.
We had this problem a few times. We could not find any cross browser CSS only solution. We finally resorted to JQuery. We wrote our own (i can't publish) but this one http://www.hardcode.nl/archives_139/article_244-jquery-sticky-footer.htm looks promising:
$(function(){
positionFooter();
function positionFooter(){
if($(document.body).height() < $(window).height()){
$("#pageFooterOuter").css({position: "absolute",top:($(window).scrollTop()+$(window).height()-$("#pageFooterOuter").height())+"px"})
}
}
$(window)
.scroll(positionFooter)
.resize(positionFooter)
});
Do you have a DOCTYPE declaration in the top of your HTML?
If so, there is a good chance I have a solution for you.
I was trying to do a height:100% table or div (assuming this is a basic cornerstone to the expanding footer feature)
No matter what I did, the 100% height didn't work! the elements just didn't stretch...
I narrowed it down to a very basic HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test1</title>
</head>
<body>
<div style="border: 2px solid red; height: 100%">Hello
World</div>
</body>
</html>
but the DIV didn't stretch all the way down (the 100% was ignored). This was true also for tables with plain height="100%" attribute.
As a desperate last result guess, I removed the DOCTYPE row, resulting in this code
<html>
<head>
<title>Test1</title>
</head>
<body>
<div style="border: 2px solid red; height: 100%">Hello
World</div>
</body>
</html>
And it worked!
I'm sure there is a good explanation, but I really didn't care since it solved the problem
Update
See related question (asked by me)
Depends on what you want to do. I you want it to be always visible on the bottom of your screen, you should use
div.footer{
position: fixed;
bottom: 0;
}
Be sure to get some padding on the bottom of your body (or container, so that people can actually scroll to the bottom of the text). The main problem here is that when resizing everything it will overlap.
If you just want to have a footer that has a background-image / colour that stretches all the way till the end (for pages that are not fullpage height) you could try to use a faux column principle or even try to give your body the background colour of your footer and fix the header / content background.
Today I stumbled across this page:
http://www.xs4all.nl/~peterned/examples/csslayout1.html
Could be helpfull
I came up with a fairly simple solution that doesn't use any CSS height hacks or any of that.
You just set your <body> with the background you want the footer to have, and then put everything besides the footer in a <div> with the properties you would normally give to the body tag.
This gets the footer to "extend" its color to the bottom of the page when there is short dynamic content without expanding it needlessly when there is a lot of dynamic content. The "virtual body" div can still have a gradient followed by a solid color, and the footer's background is hiding in the body tag, only showing up on short pages. (Works great if you need a solid color to continue after your footer gradient ends, or if you just need the background to match the footer color)
CSS
body {background-color: #000; }
#primary_container { background: #FFF url('/images/bgvert.png'); background-repeat: repeat-x; }
#footer { background: #000; }
HTML
<body>
<div id="primary_container">
<!-- most content, can be short or long -->
</div>
<div id="footer">
<!-- if primary content + footer is less than browser height, body background color
displays below this. If it is more, you get normal scroll behavior to the end
of footer and body background color is never seen -->
</div>
</body>