Container and footer issues :(

Hi guys - I am just picking html and css back up after a decade long break. I am having a lot of trouble trying to define a few sections within my main page template. Basically I would like my footer to stay at the bottom and my ‘section’ to take up at least the remainder of the screen between the header+nav and the footer.

When I set the section to height:100% it expands to the height of the body, thus giving me a scrollbar. I would like not to have a scroll.

If I could get the section to take up the blank space in the middle of the screen it would probably solve my next issue as I could change my footer from absolute positioning. I don’t want the footer to be a ‘sticky footer’, I just want it to be at the very bottom of the page.

I appreciate any other feedback regarding my coding also. My preview site can be viewed at http://www.syrax.net/preview/

FYI - I would like the header and footer to remain full width.

Hi paulc101. Welcome to the forums. :slight_smile:

There are different definitions of a “sticky footer”, and we have a nice tutorial here in the CSS FAQ section for doing exactly what you want:

It is called a sticky footer, but in this version, the footer will drop off the screen if the content is taller than the viewport, so it’s not one of those footers that’s always visible (which I assume is what you wanted to avoid).

CSS isn’t well suited for doing this kind of footer, so you have to be pretty careful to follow the tutorial carefully, as it has been carefully crafted.

Let us know how you go with it. :slight_smile:

setting the height to 100% tells the browser to set the element’s height to take up the complete browser’s height. Define a definite height eg, 100px or something. If you want it to be added in percentages, then use something like 20%. if you want the header and footer to take up the full width then define the width as 100% not the height.

why don’t you try to position the footer to the bottom using

position:absolute;
bottom:0px;

HI,

As Ralph said it looks like you want a sticky footer much like this one. Make sure you read read the CSS faq as it supplies fulld etails on how this works (also read the entry on 100% height and why you can’t really use it).

Thanks all! I managed to get it working, it’s not live on the site as I keep my working files on my hard drive.

Thanks all for the help :slight_smile:

This is exactly what I tried to do, however I have enough content on one of my pages that the footer is stuck in the middle of the page and doesn’t actually stick to the bottom of the page. How do I fix that? I have tried clearfix but it is not working! I am getting very frustrated.

If it’s not working, it means you didn’t follow the links above accurately. If you post a link, we can look at what you’ve done.

It looks like you are following the wrong advice from the “quote” you posted as that advice is incorrect. Look at the links that Ralph and I have posted instead as they contain the correct information.

If you have a link or some code then we can give more specific advice and help with this issue.:slight_smile: