导航栏不会坚持到底

时间:2016-09-12 16:04:48

标签: html css twitter-bootstrap footer

<div class="row">
    <nav class="navbar navbar-default footer">
      <div class="container-fluid">
        <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"></button> 
        <a class="navbar-brand" href="#">
          <img src="images/Logobott.png" />
        </a></div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="foot-stylee">
              <a href="#">Apps</a>
            </li>
            <li>
              <a href="#">Gadgets</a>
            </li>
            <li>
              <a href="#">Sience</a>
            </li>
            <li>
              <a href="#">Nature</a>
            </li>
            <li>
              <a href="#">Creative</a>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right nav-r">
            <li>
              <a href="#">© 2016 Great Simple</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
 .footer {
   width: 100%;
  margin-top: 30px;
   margin-bottom: 0px;
   z-index: 12;
   background-color: rgb(134, 147, 158);
                           }

你可以看到我的页脚没有粘到底部。我有其他页面的相同的确切代码,它工作,但对于这个页面,它没有。谁能告诉我有什么问题?我希望它在页面的末尾。

4 个答案:

答案 0 :(得分:2)

您可以使用positioning实现这一目标。制作页脚position: fixed;并将其bottom: 0;赋予它,使其粘在视口的底部:

&#13;
&#13;
.footer {
  width: 100%;
  height: 200px;
  margin-top: 30px;
  margin-bottom: 0px;
  z-index: 12;
  background-color: rgb(134, 147, 158);
  position: fixed;
  bottom: 0;
}
&#13;
<div class="row">
  <nav class="navbar navbar-default footer">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"></button>
        <a class="navbar-brand" href="#">
          <img src="images/Logobott.png" />
        </a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="foot-stylee">
            <a href="#">Apps</a>
          </li>
          <li>
            <a href="#">Gadgets</a>
          </li>
          <li>
            <a href="#">Sience</a>
          </li>
          <li>
            <a href="#">Nature</a>
          </li>
          <li>
            <a href="#">Creative</a>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right nav-r">
          <li>
            <a href="#">© 2016 Great Simple</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>
&#13;
&#13;
&#13;

修改

如果您希望页脚位于页面底部而不是视口底部,只需删除position: fixed;将页脚上方的元素设为min-width 100%减去页脚高度,例如:

min-height: calc(100% - 200px);

答案 1 :(得分:1)

当您第一次拥有可能无法填充<html>的{​​{1}}时,window's height元素以及<body>元素都没有...如果您愿意有一个粘性页脚,你可以尝试

.container

编辑1 -

有两种不使用固定位置的方法,第一种方法是使用CSS的.footer { position: fixed; bottom: 0; left: 0; right: 0; height: 100px; } body { padding-bottom: 100px; } 功能:

calc html, body { min-height: 100vh; } nav { min-height: 10vh; height: auto; } footer { min-height: 100px; height: 100px; }

使用main { min-height: calc(90vh - 100px); }<table><tr><td>display: tabledisplay: table-rowdisplay: table-cell CSS的另一种方式属性。

您可以查看我对此问题的回答以获取更多信息:Sticky footer that extends when at website-bottom and scrolling further

编辑2 -

我发现这可以通过min-height轻松完成。

display: flex;

试试:https://jsfiddle.net/89ucrec5/6/

答案 2 :(得分:1)

几个月前我找到了一个不错的解决方案......你必须将你的页面内容和页脚包装成单独的包装器,并使用:after做一点CSS魔术来使它正确。

HTML:

<html>
<body>
<div class="content-wrapper">
  my content
</div>


<div class="footer-wrapper">
  my footer
</div>
</body>
</html>

的CSS:

html, body {
  height: 100%;
}

.content-wrapper {
  min-height: 100%;
  margin-botton: -100px; //set to anything as long as it matches footer-wrapper height
}

.content-wrapper:after {
  content: "";
  display: block;
}

.footer-wrapper, .content-wrapper:after {
  height: 100px;
}

答案 3 :(得分:1)

HTML:

<div class="your-container">
   <div class="content">
   </div>
   <div class="footer">
   </div>
</div>

的CSS:

.your-container {
    min-height: 100vh;
    position: relative;
}
.footer {
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
}

您需要从主要内容中进行适当的填充

另一种方法是设置flex容器,以便您的内容占用所有剩余空间

HTML:

<div class="your-container">
   <div class="content">
   </div>
   <div class="footer">
   </div>
</div>

的CSS:

.your-container {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
}
content {
   flex-grow: 1;
}