如何将页脚保留在正文内容下方的页面底部

Question

我想要完成的是让所有页面的页脚都位于正文内容下方。所有页面都将具有不同大小的正文内容。对我来说具有挑战性的一点是所有页面只保留一个 CSS。

我尽力在此处显示 css 和 HTML，但没有成功。相反，这是我的代码的 JSFiddle：https://jsfiddle.net/zsrsd20m/

 .container {
min-height:80%;
position:relative;
}

.titleText{
width:100%;
padding-top: 35px;
padding-bottom: 35px;
background-color: #127577;

color: white;
text-align: center;
}

.navBar{
 padding-right: 20px;
 float:left;
 }

.mainText{
 height:100%;
 padding-left:220px;
 padding-right:250px;
 padding-bottom:0px;
 font-size: 20px;
 text-align: justify;
}

.footerText{  
 width:100%;
 padding-top: 35px;
 padding-top: 23px;
 background-color: #127577;
 color: white;
 text-align: center;
}

.Container 和所有其他在 HTML 中制作的 Div 是因为这个而制作的：http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

我想要这样，即使正文内容太小，页脚也始终位于页面底部。如果正文内容很大，同样适用。当前，当将正文内容的高度设置为 100% 时，即使内容很小并且不需要滚动条，它也会向我显示滚动条。当删除高度时，它使页脚直接位于小正文内容的下方，这是一半好但它不在页面底部所以看起来很糟糕。

问题截图： https://imgur.com/a/x16RC

Answer 1

哇 - link 很老了。这些天我们有一些更好的技术可用，即 flexbox。

/* The magic: */
.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

/* Stlyes to make the demo easier to see: */
body { margin: 0; }
header { background-color: #FDD; }
main { background-color: #DFD; }
footer { background-color: #DDF; }

<body class="Site">
  <header>Header</header>
  <main class="Site-content">Content</main>
  <footer>Footer</footer>
</body>

您可以阅读所有相关内容right here

Answer 2

使用粘性页脚CSShttps://css-tricks.com/couple-takes-sticky-footer/

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

html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}

Answer 3

试试这个。

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
           <a href="" >Test Link</a>
      </p>

      <a href="" class="navbar-btn btn-danger btn pull-right">
      <span class="glyphicon glyphicon-star"></span>Copyright 2017</a>
    </div>

参考：https://bootsnipp.com/snippets/featured/easy-sticky-footer

如何将页脚保留在正文内容下方的页面底部

How to keep footer at the bottom of page under the body content

html

css

jsfiddle

web