We are having a problem where some pages that do not have much content have a lot of blank space above the footer. What is a way this can be removed on pages without messing up other pages that actually have a lot of content?
It can be seen here: Click Here
So this is a pretty common problem, but fairly easy to fix. With the appropriate page structure and styling, you can have your footer pushed to the bottom of the page even when there isnt enough content to do so. In your case, you have too much additional space which is pushing the content to far down.
I use the example/demo found here: Pushing a Footer to the Bottom of a Web Page
I quickly took the HTML structure and CSS and "injected" it into your HTML and the result is as shown below. I must have messed up something in the copy and paste because I seemed to have messed up with somethin in the header section of your code..
If you had more content than could fit in the page, the footer is pushed to the bottom of the content as well.
Getting this to work with your site perfectly will take some time. I have done this for other people's work in the past and I find it easier to start with the demo/template and then add the existing content into the template until all of the HTML is in place.
It is your container div causing the problem and it is not required - remove it and the extra space will disappear. This then leaves the problem that if the content is too little the fotter will have a gap underneath it but that can be fixed by using position: absolute instead of position: relative.
If you really want to keep the container div then move your footer inside it as for some reason you have it outside yet you have your header inside.
make a containing div with no height, the div will have the height of the content. if there is no content its also has no height
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.