如何将页脚保持在body内容下的页面底部

我要完成的工作是让我所有页面的页脚在身体内容下。所有页面都有不同大小的身体含量。对我而言，具有挑战性的一点是只保留一个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;
}

。为此，html中制造的所有其他div是因此的：

我想要它，以便即使身体含量太小，页脚也总是留在页面底部。如果身体含量很大，也适用。目前，当将身体内容的高度设置为100％时，它向我显示了一个滚动条，即使内容很小并且不需要滚动条。卸下高度时，它会使页脚直接在小的身体内容下，这是一半好，但不在页面底部，因此看起来很可怕。

问题的屏幕截图：https://i.stack.imgur.com/vrbda.jpg

哇 - 链接是旧的。如今，我们有一些更好的技术，即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>

您可以在此处阅读所有内容

使用Sticky页脚CSS https://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;
}

尝试这个。

<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

相关内容

最新更新

热门标签：