How to make footer stay at the bottom of the page? (not using position:fixed)

I'm having trouble making my footer stay at the bottom of my page. I don't want it to be fixed when scrolling, just when the user reaches the bottom of the page. I think it has something to do with my grid.

<body>

<ul>
    <li>Home</li>
    <li>About</li>
    <li>The Developer</li>
    <li>Contact</li>
</ul>
<h1>Welcome to the City of Melbourne!</h1>
<h2 style="margin-bottom: 50px;">Where would you like to go?</h2>
<div class="col_contain">
<a href="frederation/frederationsquare.html"><div class="container">
    <img src="http://rmitcatalyst.com/wp-content/uploads/2013/03/Fed-Square.jpg" alt="Frederation Square" class="image">
    <div class="middle">
    <div class="text">Federation Square</div>
</div>
</div></a>
<a href="chinatown/chinatown.html"><div class="container">
<img src="http://www.whitehat.com.au/images/melbourne/CTown.jpg" alt="Chinatown" class="image">
<div class="middle">
    <div class="text">Chinatown</div>
</div>
</div></a>
<a href="library/library.html"><div class="container">
<img src="https://www.slv.vic.gov.au/sites/default/files/styles/feature_image/public/strategic-plan-hero.jpg?itok=CCmv7jIG" alt="State Library" class="image">
<div class="middle">
    <div class="text">State Library of Victoria</div>
</div>
</div></a>
<a href=""><div class="container">
<img src="http://www.mymarketsvic.com.au/directory/files/logo/58.jpg" alt="South Melbourne Market" class="image">
<div class="middle">
<div class="text">South Melbourne Market</div>
</div>
</div></a>

<a href="shrine/shrine.html"><div class="container">
<img src="https://thumbs.dreamstime.com/b/shrine-remembrance-melbourne-australia-july-bright-flowers-below-victoria-memorial-to-58139919.jpg" alt="Shrine of Remembrance" class="image">
<div class="middle">
<div class="text">Shrine of Remembrance</div>
</div>
</div></a>

<a href=""><div class="container">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/12/35/7f/fd/ngv-triennial-skull-room.jpg" alt="NGV" class="image">
<div class="middle">
<div class="text">National Gallery of Victoria</div>
</div>
</div></a>

</div>
</body>
<footer style="background-color: white;">
  Created by Carisa Atmarini
</footer>

I have tried doing this but it became positioned above the body instead of being at the bottom. If anyone has a clue, please let me know.

Here's my codepen link for the full page: https://codepen.io/codecarisa/pen/pZoXYW

2 answers

  • answered 2018-07-11 03:52 wazz

    I think the main issue is .col_contain: remove the height.

    Also remove position: absolute on the footer, and make sure the footer is inside the body.

    And change the padding on the body:

    body { padding-bottom: 0; }
    

  • answered 2018-07-11 04:02 Saral

    To make your footer sticky i.e. the footer always sticks to the bottom of the page without positioning fixed you can use the following code:

    html{
        position:relative;
        min-height:100%;
    }
    
    body{
    
        margin-bottom:150px;
    }
    
    footer{
        position:absolute;
        bottom:0;
        height:100px;
    
    }
    

    For more information about this visit this link.