如何使页脚停留在页面底部？（不使用位置：固定）

Question

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 这是我整页的codepen链接： https ://codepen.io/codecarisa/pen/pZoXYW

Answer 1

I think the main issue is .col_contain : remove the height. 我认为主要问题是.col_contain ：删除高度。

Also remove position: absolute on the footer, and make sure the footer is inside the body. 还要移开position: absolute放在页脚上，并确保页脚在主体内部。

And change the padding on the body: 并更改主体上的填充：

body { padding-bottom: 0; }

如何使页脚停留在页面底部？（不使用位置：固定）

问题描述

1 个解决方案

解决方案1
0 2018-07-11 03:52:55

如何使页脚停留在页面底部？ （不使用位置：固定）

问题描述

1 个解决方案

解决方案1 0 2018-07-11 03:52:55

如何使页脚停留在页面底部？（不使用位置：固定）

解决方案1
0 2018-07-11 03:52:55