CODEWITHSUNDEEP
htmlcsssticky-footer
Dave Rottino
Dave Rottino

Reputation: 1047

CSS issue - footer goes too long?

I'm having a bit of a problem with the footer on this site. I am looking for it to have a set minimum height and flow to the bottom of the page no matter the resolution. Kind of like a sticky footer but I want it to butt up against the end of the container div above it.

The issue is consistent across all modern browsers (Safari, Chrome, IE, and Firefox).

Too much CSS to post here but Firebug or a view source will show the corresponding styling. Any help would greatly appreciated.

http://034732e.netsolhost.com/gdlsk_joomla/

Upvotes: 2

Views: 3260

Answers (4)

Diana De Jesus
Diana De Jesus

Reputation: 21

I was having a similar issue, it should look like this:

HTML 

<footer id="wrapper" class="main_footer">
    <nav>
      <a href="#">A</a>
      <a href="#">B</a>
      <a href="#">C</a>
   </nav>
</footer>

CSS

#wrapper {
 position: absolute;
 width: 100%;
 }

Upvotes: 0

Punit
Punit

Reputation: 1120

try this changes in you css:

body > #page {
height: 100%;
}

@#footer: remove-> property top:0;
add-> property bottom:0;

Upvotes: 0

mrtsherman
mrtsherman

Reputation: 39902

Thanks for the screenshot. Your description makes more sense now. I would do the following. Right now you have something like

<body>
  <page>
     <header />
     <bodycontent />
  </page>
  <footer />
<body>

I would consider something like this

<body height: 100%;>
    <page height: 100%; background: gray;>
      <header background: black; />
      <bodycontent background: black; />
      <footer />
    </page>
<body>

Basically what we do is set body and page to 100% which means they take up the entire screen. Page uses the same bg color as the footer. Finally we set header and bodycontent to have black backgrounds so that they cover up the Page's gray.

Upvotes: 2

animuson
animuson

Reputation: 54797

Specifying 100% height on the footer is not doing what you think it does. You're telling it that you want the height to be 100% of the body, it doesn't just "expand to fill" the remaining space. It will actually be 100% height, plus everything else you've added in. It is achieving your minimum height of 150px and more.

Upvotes: 0

Related Questions