Any CSS Print gurus?

monaghan · Oct 4, 2012

I'm trying to push a DIV to the bottom of a printed page, any suggestions? I can get it to the bottom of the viewport, but the printed page is another problem.

Needs to be the same on Mac & PC.

AssetDomains · Oct 4, 2012

Never done any print css can you set a min-height in the previous div to push it down

tifosi · Oct 4, 2012

How are you including it in the style sheet? The old way was a full css file for the stylesheet defined by a media print in the meta tag, the modern way is to use

Code:

@media print { … }

in your default css file and add the definition at the foot of the file.

How to put your div at the bottom depends on where the div is to start with. If the div is already the last div element then as a block element use something like { clear: both; width: 100% } to force the block to appear below the one above. If it's inside another div you can use the above to force it below the one above but will still be above any defined divs below it and within the parent container.
.
If you want it separate from other content then position: relative, position: absolute and position: fixed are all available where the div can be fixed relative to it's containing block - either if that is defined as position:relative, or the body/window if there is no relative container.

As I said, depends on where the div is.

killaclown · Oct 4, 2012

i use something like this

http://ryanfait.com/sticky-footer/ combined with tifosi code, should work a treat

tifosi · Oct 4, 2012

killaclown said:
i use something like this

http://ryanfait.com/sticky-footer/ combined with tifosi code, should work a treat

That's actually qute neat. Took me a moment to figure out what it's actually doing. Essentially it's tagging on a section to the end of a document.

Your current html would need to incorporate the wrapper html/css for it to work.