Hi All,

 

I'm trying to get an inner-container to have a 100% height but whener i do it, it works except for a small margin at the bottom of the page.

I've had this problem on a number of sites now and have never been able to fix it. It looks as if it's the browsers built-in reset stylesheet but can't see if it is or not and it won't allow me to inspect it to get it properties.

 

I'm using Safari 5.1.3 on Mac OS X Lion 10.7.3 but it's evident in all browsers.

 

The culprit site in question is here: http://www.voltronik.co.uk/bellboymusic/ but it's also evident on this site: http://www.kevinscullion.com (look at the bottom of the sidebar).

 

Any help on fixing this very annoying problem would be greatly appreciated!

 

Many thanks in advance,

-Jack

You have got body : margin: 0; so it shouldn't be the default body margin, but after checking with this validator

http://validator.w3.org/

you have a few errors and one is an unclosed div.Try to correct the erros and see if the problem goes away.

You have got body : margin: 0; so it shouldn't be the default body margin, but after checking with this validator

http://validator.w3.org/

you have a few errors and one is an unclosed div.Try to correct the erros and see if the problem goes away.

 

Thanks but it hasn't. Like i said, i've had this on other sites too.

It is really strange and quite frustrating because i can't seem to 'inspect' that area. It just defaults to the HTML tag in Web Inspector implying it's a browser reset stylesheet.

 

What do you think?

Edited February 15, 201214 yr by jackmcconnell

Thanks but it hasn't. Like i said, i've had this on other sites too.

It is really strange and quite frustrating because i can't seem to 'inspect' that area. It just defaults to the HTML tag in Web Inspector implying it's a browser reset stylesheet.

 

What do you think?

 

Can you add overflow:hidden to your main-container divs

Your clearfix is inserting a full stop on that line.

Your clearfix is inserting a full stop on that line.

 

Thanks, that was it. Can't believe that's all it was.

I went to apply the fix to the other site but it's even worse now: http://www.kevinscullion.com/

 

Is it because i have an absolutely positioned sidebar?

Thanks, that was it. Can't believe that's all it was.

I went to apply the fix to the other site but it's even worse now: http://www.kevinscullion.com/

 

Is it because i have an absolutely positioned sidebar?

 

Still have this problem and can't seem to find why it won't go away.

 

Can anyone shed any light on it?

Pretty sure the parent DIV needs a height property.

 

Also, the code is lacking in structure and general tidyness for me. It makes it really hard to diagnose and fix these problems.

Pretty sure the parent DIV needs a height property.

 

Also, the code is lacking in structure and general tidyness for me. It makes it really hard to diagnose and fix these problems.

 

Thanks. I've tidied it up quite a lot.

Although not an old site, it certainly feels old in comparison to my knowledge and experience now .

 

I've added a height to the container div and looked at a few other little things that i thought might be causing problems but it's not working.

The problem seems to be that it only wants to be as tall as the viewport and does not want to extend down to the full height of the page.

*nudge*

 

Can anyone shed any more light on this. I really am at the end of knowledge with it and just can't understand why it's not working.

I really feel i've tried everything. :S

When I delete the footer in developer tools, it works. I think it's in the wrong place and this is causing your problem.

 

Edit: Your content DIV closes before the footer. Move the footer inside. That may fix the issue.

 

I believe this is why your footer is not contributing to the height of the content div, which is what the sidebar is max-heightening to.

Edited February 28, 201214 yr by brightonmike

When I delete the footer in developer tools, it works. I think it's in the wrong place and this is causing your problem.

 

I'd love to say yes but it's a no.

Although it looks like it works, when the page is extended via adding more content to create a scrollbar, the sidebar only is as high as the browser window, not the height of the website.

 

It is a head scratcher, that's for sure.

Your issue is definitely with the structure of your HTML. It's not right, you have too many wrappers and I believe this is your problem.

Add "position:relative" to the parent DIV "inner-wrapper".

 

And yeah, tidy up the HTML, you have a lot of code you don't need, so many of the divs including "innerwrapper" don't even have styles associated with them, they're pointless.

 

I'd suggest a re-write.

Edited February 28, 201214 yr by brightonmike

Add "position:relative" to the parent DIV "inner-wrapper".

 

You're a legend. Worked perfectly.

 

I must have added in the inner-wrapper at some point after adding the main-container and not moved the position: relative;

Can't believe i missed that now that you pointed it out!

 

Thanks very much.