<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);
}
你可以看到我的页脚没有粘到底部。我有其他页面的相同的确切代码,它工作,但对于这个页面,它没有。谁能告诉我有什么问题?我希望它在页面的末尾。
答案 0 :(得分:2)
您可以使用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;
}
&#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;
修改强>
如果您希望页脚位于页面底部而不是视口底部,只需删除position: fixed;
将页脚上方的元素设为min-width
100%减去页脚高度,例如:
min-height: calc(100% - 200px);
答案 1 :(得分:1)
当您第一次拥有可能无法填充<html>
的{{1}}时,window's height
元素以及<body>
元素都没有...如果您愿意有一个粘性页脚,你可以尝试
.container
有两种不使用固定位置的方法,第一种方法是使用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: table
和display: table-row
与display: table-cell
CSS的另一种方式属性。
您可以查看我对此问题的回答以获取更多信息:Sticky footer that extends when at website-bottom and scrolling further
我发现这可以通过min-height
轻松完成。
display: flex;
答案 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;
}