Why footer is good on some pages but on others not?-CodePudding

My footer is well placed on some pages but on others it isn't. I did try to fit some suggestions offered on stackoverflow but did not work as it isn't the same issue. Thus, please do not downgrade this question.

An example for footer working well on some pages :

An example of bad footer, with white space above and bellow is this:

Even when doing drop down for Info tab, I have another page with the same bad footing space.

Here is the actual code I am working with:

 <footer class = "site-footer">
    <div class = "phs-purple-container">
   <div class = "container-inner-contents" id = "further-links-section">
    <!-- links to other profiling products -->
        <div >
        <img padding: 10px 10px; height="150px" src="www/bftb_logo_v8_bare.png">
        </div>
        <div >
        <h4 style = "color:#d2cfeb" >Links</h4>
        <ul>
        <li><a style = "color:#d2cfeb" href="http:/bftb">test/bftb</a></li>
        <li><a style = "color:#d2cfeb" href="https://test.com/groups/430852910696122/">Workplace Group</a></li>
        <li><a style = "color:#d2cfeb" href="https://testics-for-the-Bench.aspx">Tutorial Recordings</a></li>
        </ul>
        </div>
        <div >
        <h4 style = "color:#d2cfeb" >About us</h4>
        <p style = "color:#d2cfeb">The Bioinformatics for the Bench landing page was built by Gab under supervision of And and Jo. Please contact us with suggestions </p>
        </div>
        <div >
        <h4 style = "color:#d2cfeb">Support</h4>
        <ul>
        <li><a style = "color:#d2cfeb" href="mailto:test.com">Contact Gab</a></li>
        <li><a style = "color:#d2cfeb" href="mailto:test.com">Contact And</a></li>
        <li><a style = "color:#d2cfeb" href="mailto:test.com">Contact Jo</a></li>
        </ul>
        </div>
        </div>
        </div>
</footer>

Can someone help me fix and understand the error?

CodePudding user response：

Your error here is that your footer by default just comes after the element before your footer. Without knowing your whole page, you'd tell the footer where to be placed. In Angular Material, they use the following CSS which should also work for you:

z-index: 9000;
bottom: 0;
left: 0;
right: 0;
position: fixed;

CodePudding user response：

sorry for my bad english. btw, i think it is because the page where footer looks good have enough content and in which page not enough content there footer comes up. Try to give some margin from bottom in body section .