Adding a footer that is always displayed at bottom of screen?

爷,独闯天下 提交于 2019-12-20 20:37:55

问题


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 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>



回答5:


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.




回答6:


Use bootstrap class

 <footer class="container-fluid text-center">
   <div class="footer navbar-inverse navbar-fixed-bottom">
     <p>Footer is here</p>
   </div>
 </footer>


来源:https://stackoverflow.com/questions/6170452/adding-a-footer-that-is-always-displayed-at-bottom-of-screen

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!