Adding a footer that is always displayed at bottom

2019-03-26 05:05发布

站内问答 / HTML/CSS
1128 5 4

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.

5条回答
淡お忘
2楼-- · 2019-03-26 05:22

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

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;
}
查看更多
0人赞 添加讨论(0) 举报
倾城　Initia
3楼-- · 2019-03-26 05:29

use the following css properties:

position: fixed;
bottom: 0px;
查看更多
0人赞 添加讨论(0) 举报
Melony?
4楼-- · 2019-03-26 05:39

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>

查看更多
0人赞 添加讨论(0) 举报
萌系小妹纸
5楼-- · 2019-03-26 05:41

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

查看更多
0人赞 添加讨论(0) 举报
我想做一个坏孩纸
6楼-- · 2019-03-26 05:41

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)