css html footer
I am re-writing this question to better convey the problem:
I have 3 output mechanisms:
- Screen
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开发者_C百科 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.
加载中,请稍侯......
精彩评论