Html 页面底部的 Bootstrap 页脚
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40853952/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap footer at the bottom of the page
提问by Ivan
I have read a lot of posts about this but I still didn't find an answer.
I have a footer that I want to be at the end of the page, not fixed.The problem is that the footer is where the content ends. Look at picture.
我已经阅读了很多关于这个的帖子，但我仍然没有找到答案。
我有一个页脚，我想放在页面的末尾，而不是固定的。问题是页脚是内容结束的地方。看图。
This is my HTML:
这是我的 HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Mobtech - Privatni korisnici </title>
<!--Ubaci bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="css/basic-template.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
</head>
<body>
<!--Navigation bar -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-container">
<span class="sr-only"> Pokazi i sakrij navigaciju </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<span> <img src="Slike/logo.png" alt="LogoSlika"/> </span>
<font face="Roboto Condensed" size="4" color="green"> Mobtech </font>
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-container">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html"> Po?etna strana </a> </li>
<li class="active"><a href="#"> Privatni korisnici </a> </li>
<li><a href="poslovni.html"> Poslovni korisnici </a> </li>
<li><a href="uredjaji.html"> Ure?aji </a> </li>
<li><a href="onama.html"> O Nama </a> </li>
</ul>
</div>
</div>
</nav>
<br />
<div class="container"> <!--Container -->
<div class="row">
<!-- Kolona na velikom ekranu (lg) prikazuje duzinu jedne kolone, Ekstra small (xs) prikazuje 4 kolone -->
<div class="col-lg-12 bg-success">
<p> Outer div </p>
<div class="col-lg-6 bg-primary">
<p> Inner div </p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="mojFooter">
<font face="Roboto Condensed" size="4"> <center>
<div class="container">
<div class="row" style="margin-top: 7px;">
<p> © Copyright Ivan Pro?i? 2016.</p>
</div>
<div class="bottom-footer">
<div class="col-md-12">
<ul class="footer-nav">
<li> <a href="https://www.facebook.com/"> Facebook </a> </li>
<li> <a href="https://twitter.com/"> Twitter </a> </li>
<li> <a href="https://plus.google.com/"> Google+ </a> </li>
</ul>
</div>
</div>
</div>
</font> </center>
</footer>
<!-- JavaScript fajl -->
<script src="js/jquery.min.js"></script>
<!-- Kompresovan JavaScript fajl -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
This is my CSS, for the footer only:
这是我的 CSS，仅用于页脚：
.mojFooter{
background-color: #f8f8f8;
color: #00a651;
padding-top: 0px;
border-top: 1px solid #e7e7e7;
margin-bottom: 0px;
}
.bottom-footer{
border-top: 1px solid #00a651;
margin-top: 0px;
padding-top: 7px;
color: #00a651;
}
.footer-nav li{
display: inline;
padding: 0px 40px;
}
.footer-nav a{
color: grey;
text-decoration: none;
}
回答by luke
The simplest and cross browser solution for your problem is to set a minimal height for bodyobject. And then set absoluteposition for your footer with bottom: 0rule.
对于您的问题，最简单的跨浏览器解决方案是为body对象设置最小高度。然后absolute用bottom: 0规则设置页脚的位置。
body {
min-height: 100vh;
position: relative;
margin: 0;
padding-bottom: 100px; //height of the footer
box-sizing: border-box;
}
footer {
position: absolute;
bottom: 0;
height: 100px;
}
Please check this example: FIDDLE
请检查这个例子： FIDDLE
回答by Robert Beckson
In my case for Bootstrap4:
就我的 Bootstrap4 而言：
<body class="d-flex flex-column min-vh-100">
<div class="wrapper flex-grow-1"></div>
<footer></footer>
</body>
回答by Máté Gregor
Use this stylesheet:
使用这个样式表：
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
}回答by Влад Бантуш
You can just add style="min-height:100vh" to your page content conteiner and place footer in another conteiner
您可以将 style="min-height:100vh" 添加到您的页面内容容器并将页脚放在另一个容器中
