Search code examples
htmlcsspositioning

"stick" content to bottom page, not viewport, with auto height


i have problem with my new page link here I need page with min-height: 100%, because i want have content in the bottom of the page, where page is in big viewport then content isn't in bottom, when i use some reasone like html, body { height: 100% } there is problem content is over top navigation and page have only 100% link with more text height... i don't have any idea more...

Exist method, that content is stick to bottom page, but height od whole page is auto?

Thank, Piklis


Solution

  • In your case you wantthe footer t to stick at the bottom when the height of the page is 100% or less, but you also want the content to push your footer in case there is more content. It's 2 different css rule which can't coexist. I would recommand you just to add 150px margin at the end of your div #content and to set your footer in position:fixed instead of absolute. I know it's not exactly the result you want but it's the easiest way to fix your problem. If you really want your content to push the footer, you'll have to detect height with js, and change your css rule if >100%.