sticky footer problem

  • Resolved mrwolfy

    (@mrwolfy)


    15 years, 6 months ago

    I have a problem with my sticky footer. It works, keeping the footer pinned to the bottom of the browser at all times, regardless of how much content I have or the size of the browser.

    BUT, for one thing, if I have just enough content, no less or more than enough to fill the web browser window, the content overlaps the footer. I have posted an image here because the site is not live yet:

    https://www.mrwolfy.com/stickyFooterProblem.jpg

    Note: if I have lots of content, more than enough to fill the browser window, the footer is not overlapped, it’s fine, i just get a scroll bar on the right and the footer is pushed to teh bottom of the content.

    Below is the css I am using for the sticky footer. the .wrapper div is the outer container for all the content

    * {
	margin: 0;
}

.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -50px;
}

html, body {
 	height: 100%;
}

    Any ides?

    Thanks,

    W

Viewing 2 replies - 1 through 2 (of 2 total)

  • In the example on ryanfait.com the footer is outside the wrapper div, maybe that’s your problem?

    <body>
  <div class="wrapper">
    <p>blah</p>
    <div class="push"></div>
  </div> <!-- wrapper -->

  <div class="footer">
  </div>
</body>

    Peter

    Thread Starter mrwolfy

    (@mrwolfy)

    Thanks Pboosten!

    What it was is that I left the <div class="push"></div> out of my template. I guess it compensates for the negative margin: margin: 0 auto -50px; it’s styled with a 50px height . Anyway it works.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘sticky footer problem’ is closed to new replies.