Website CSS Programming Help (1 Viewer)

[jrdbrn]

Since I am the IT Manager, per say, I was tasked with converting our website from our old company to our new company since it was relatively new. We had a web designer within the company group, but he was with the other company. I have converted it all, but the height of the site won't go 100%. It's driving me nuts. Can someone tell me what I am doing wrong. I am attaching the CSS file. The footer should be touching the bottom. I've tried adjusting the height on all the containers, but it doesn't matter.

The page in question is CHI Aviation, Inc.

 

[robsmith32]

Firebug for Firefox, there is also a dev tool for chrome, that i can't recall the name for it.
Looks like you have multiple areas to 100% need to make the inner area's total=100%
without looking very closely.

 

[zeetes]

it's possible that the clear footer is breaking the height. you shouldn't have to declare a height if you are "clearing" for a new container.

it may be easier just to keep the position of the footer absolute to the bottom of the screen.

nested tags within the container over the footer, you could also just create an empty box that takes up the space depending on the lenght of the site. i'm way too out of practice to know what tag would work.

i'll look over the code more later if i have time. it may just be a simple setting overlooked.

 

[jrdbrn]

Sorta got it working LOL. It's on the bottom now, but it doesn't move!

 

[TheDeparted]

Why do so many containers have a negative bottom margin of 300? To overlap each other?

 

[jrdbrn]

Why do so many containers have a negative bottom margin of 300? To overlap each other?

I don't know. I didn't make the design.

 

[jrdbrn]

FWIW, I still can't get this thing to touch the bottom. Everything I Google doesn't work. Something in the coding is throwing it off. Just can't figure it out.

 

[TheDeparted]

Try commenting out the footer to see what that does. It has a minimum height of 300px.

How far from the bottom are you able to get?

 

[jrdbrn]

Some pages it touches, which is fine. It's the pages that there's not enough content for it to touch the bottom. I would like all the pages to have the footer touch the bottom. I put height: 100%; on almost everything and it does nothing. I tried it on just certain classes and it still doesn't do anything.

 

[jrdbrn]

See attached

 

[TheDeparted]

Oh, I see. you want the footer to be anchored to the bottom of the page, and you want the content to be contained within its own scrollable frame. ?

I'm not a CSS guy, but there should be a way to set the content frame's height to '*' or basically, "all remaining space not already allocated".

 

[jrdbrn]

I don't want a sticky footer, which is what I keep finding online. I don't know what's wrong with the coding that I can't make the page 100%.

 

[TheDeparted]

I don't want a sticky footer, which is what I keep finding online. I don't know what's wrong with the coding that I can't make the page 100%.

The page is expanding to 100% of the size of the content. I think if you want it to behave differently, you're going to need to do something very different.

For that matter, I'm not sure CSS has access to the size of the Browser Window. If this is the case, then what I think you want is impossible to achieve with the tools you are using. If it does, then you want to set the size of the content to the remainder of the window height - footer height (as an absolute, and not a proportion). And it'll have to be recalculated on every resize event, as long as the content is not tall enough to force the footer off the page.