导航栏不粘在底部
Posted
技术标签:
【中文标题】导航栏不粘在底部【英文标题】：The navbar does not stick to bottom 【发布时间】：2017-01-20 03:18:17 【问题描述】：<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);
如您所见，我的页脚没有粘在底部。我对其他页面有相同的确切代码并且它有效，但对于这个页面它没有。有人可以告诉我有什么问题吗？我希望它位于页面末尾。
【问题讨论】：
用一些css修复它怎么样？比如绝对位置和底部 0 我猜这是因为您没有足够的内容来填满整个窗口。您可以在页脚上方的内容中添加一些padding-bottom 或在页脚中添加padding-top 以完全填满窗口。
【参考方案1】：
您可以通过positioning 实现这一目标。将页脚设置为position: fixed; 并将其设置为bottom: 0;，这样它就会贴在视口的底部：
.footer
width: 100%;
height: 200px;
margin-top: 30px;
margin-bottom: 0px;
z-index: 12;
background-color: rgb(134, 147, 158);
position: fixed;
bottom: 0;
<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>编辑
如果您希望页脚位于页面底部而不是视口底部，只需删除 position: fixed; 给页脚上方的元素一个 min-width 为 100% 减去页脚高度，例如：
min-height: calc(100% - 200px);
【讨论】：
我不想固定位置。我要的是相对的。当您向下或向上滚动时，固定将出现在页面上我希望它在到达页面末尾时出现。【参考方案2】：当您第一次拥有一个可能无法填充window's height 的<html> 和<body> 元素以及.container 元素时...如果您想要一个粘性页脚，您可以尝试
.footer
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100px;
body
padding-bottom: 100px;
编辑 1 -
不使用固定位置的方法有两种，第一种是使用CSS的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: table、display: table-row 和display: table-cell 与min-height CSS 属性。
您可能想查看我对此问题的回答以获取更多信息：Sticky footer that extends when at website-bottom and scrolling further
编辑 2 -
我发现这可以通过display: flex; 轻松完成。
body
display: flex;
flex-direction: column;
flex-wrap: no-wrap;
min-height: 100vh;
header height: 100px;
content flex-grow: 1;
footer height: 100px;
试穿：https://jsfiddle.net/89ucrec5/6/
【讨论】：
我不想固定位置。我要的是相对的。当您向下或向上滚动时，固定将出现在页面上我希望它在到达页面末尾时出现。 @AmirTorkashvand 请同时查看我的回答的编辑 2【参考方案3】：几个月前我找到了一个不错的解决方案...您必须将页面内容和页脚包装到单独的包装器中，并使用 :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;
【讨论】：
【参考方案4】：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;
【讨论】：
以上是关于导航栏不粘在底部的主要内容，如果未能解决你的问题，请参考以下文章