可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

How can i add a footer that is always at the bottom of the screen even when the page contents are very small

e.g of problem, lets say I have a page that doesn't have that much on display in it, the footer therefore becomes in the middle of the screen. Can I ensure that if the page doesn't have a lot of contents then the footer just be at the bottom of the screen?

UPDATE

I just want a footer that is at the bottom of the screen when there is not enough content to fill the whole screen (i.e I don't want the footer showing up in the middle of the screen) and then if there is enough content for it to just go down at the bottom of the page.

回答1:

You're after a "sticky footer", this article shows some of the techniques you can use:

https://css-tricks.com/couple-takes-sticky-footer/

Here's the flexbox version: http://codepen.io/chriscoyier/pen/RRbKrL

HTML:

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

CSS:

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

回答2:

use the following css properties:

position: fixed;
bottom: 0px;

回答3:

Here's a CSS only solution, no jQuery needed. Make the wrapper's minimum height 100% and position it relatively, then position footer absolutely to bottom left:

#wrapper {
    min-height:100%;
    position:relative;
}

#content {
    padding-bottom:80px;
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
}

Source

回答4:

You'll want to use a fixed position element that is bound to the bottom of the page.

Say you use a div to encompass the footer, you'll want some css like this:

div#footer{
  position: fixed;
  z-index: 1000000;
  overflow: hidden;
  bottom: 0px;
  left: 0px;
  height: 100px;
  width: 600px;
}

You'll probably want to update the height and width when a user resizes the form. You probably will need to resize the width on pageload as well.

回答5:

You can also use sticky for the position as shown below:

.footer {
  position: sticky;
  position: -webkit-sticky;
  bottom: 0;
}

You can run this code to see if this is the type fixed footer you are looking for.

body {
  display: grid;
  min-height: 100vh;
  min-width: 100%;
  grid-template: "header main" "footer footer";
  grid-template-columns: 100px 1fr;
  grid-template-rows: 1fr 50px;
  grid-gap: 10px;
}

body>div {
  background-color: rgba(0, 51, 204, 0.5);
}

.header {
  grid-area: header
}

.main-content {
  grid-area: main;
  text-align: center;
}

.footer {
  grid-area: footer;
  position: sticky;
  position: -webkit-sticky;
  bottom: 0;
  z-index: 10;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Footer Stay!</title>
  <link rel="stylesheet" type="text/css" href="../style/footer.css">
</head>

<body>
  <div class="header">
    Header
  </div>
  <div class="main-content">main content</div>
  <div class="footer">footer </div>
</body>


</html>