I have a HTML page with a CSS print layout where I want one of the divs, to always appear at the bottom of the final printed page without overlapping any of the other pages.
I've tried various things, including position:fixed;bottom:0; but when converted to a PDF with iText, that div was in the same position on every page.
Thanks.
have you tried Sticky footer? Always worked for me (IE / FF / Webkit)
http://ryanfait.com/sticky-footer/
How about: a max-height and min-height the same for the printing page and the div positioned absoluted at bottom 0?
Related
I have a html page. There is a blank space at the end of the page after footer. You can see that space in Mozilla Firefox at screen sizes 768x1024, 800x1280, 980x1280.
I have tried out everything to get rid of it but failed. This space is not even identified in the inspect element. Any help will be appreciated.
By looking at the photo, I think this is the expected behavior and is caused by the fact that you do not have enough content to fill the whole page. To fix that, you would need to create a sticky footer and make the body and html 100% height;
Please see this article for the sticky footer: https://css-tricks.com/couple-takes-sticky-footer/
I'm trying to get a footer to stay at the bottom of the webpage and allow for different amounts of content on different pages. It works on my index.html page but when I go to the "about" page the footer floats to the middle of the page. Any advice? the website is up at http://www.concept82.com/DISupdate/index.html and the trouble page is http://www.concept82.com/DISupdate/about.html. Thanks!
For a start, you need to move your #bottom div outside of the #wrap div, so it's immediately following it. That'll get you most of the way there, but there still seems to be something on your index page that's keeping it from moving all the way to the bottom of the window.
Instead of -200px margin-top on #bottom, do 200px. That will fix it.
Good afternoon people. I sux with css son I wish someone can give me a hand with this. I'm trying to print some kind of html text taken from a html page with a header and a footer. This footer has to stays on the bottom of the page, if is there a second page it should appear on the bottom on that page. Anyway, I got this fiddle to show. The html looks great but when I print the page with a pdf printer, the text overlaps the footer, but only in Firefox, if a run the fiddle on Chrome, it prints the footer below the last paragraph on the second page.
Any idea how to implement this idea?
In your final div, remove the position:absolute, left and top css styles. You are positioning the footer overtop of everything. The value for top would have to be manually adjusted for each browser and you probably want to stay away from that.
Here is an updated fiddle with those css styles removed from your footer div: http://jsfiddle.net/BumbleB2na/F3kSQ/2/
On the following website, www.josecvega.com, I have a navigation bar with years that link to sections on that same page. Unfortunately it is not working they way I hoped, when the user selects a year it moves to the section of the page and puts that section on the top of the page, I have a fixed div on the top of the page that covers the sections and prevents it from properly displaying. What can I do for this to work?
It hard to explain my situation, but it can be seen by going to www.josecvega.com and clicking one of the years.
Put your anchors earlier in the file. Perhaps use a fixed-height element (the same height as your header) in the margin just before each section and apply the anchor to that.
Or use a script run after the jump and scroll back down X pixels.
Or use a frameset to display the fixed header rather than the position:fixed div you are using now.
I would probably do the latter.
your header (class=bannercontainer") is position:fixed
so this element will not scroll.
if you now click on a year it scrolls the page behind the header.
probably position:fixed is not what you want
How can I extend a div to the bottom of the page? Let's say I have a div that starts at the top, and has a background image I want repeated to the bottom of the page. How would I go about doing this?
Live example found here: http://mibsolutionsllc.com/ecgridos/about/ with the #content div.
Switch it around, have the background for your content as the body tags back ground then over lay the header over the top of it via a div or other element :)
CSS Sticky Footer does something similar, they've got a solution that seems to work on a whole range of different (including very old) browsers. If you don't need the footer you can always still use their solution and set the footer height to 0px.