页面底部的引导页脚
这是我的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>
这是我的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;
}
共有1个答案
当使用bootstrap 4或5时，可以使用flexbox来达到预期的效果：
<body class="d-flex flex-column min-vh-100">
<header>HEADER</header>
<content>CONTENT</content>
<footer class="mt-auto"></footer>
</body>
请检查示例：Bootstrap 4 Bootstrap 5
在bootstrap 3中并且不使用bootstrap。此问题最简单的跨浏览器解决方案是为body对象设置最小高度。然后用底部: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;
}
-
我知道这个问题可能被问了几百次，但遗憾的是，我在这里找到的答案并没有真正帮助我。 例如，我尝试了以下答案： 引导页脚不在底部 但是我仍然有一个问题，当我的页面内容“小”并且没有填满正文/页面容器的整个高度时，页脚只是漂浮在浏览器窗口末端的某个地方。 以下是我的页脚代码： 我正在使用Bootstrap 4.1和Chrome，我的网站上还有一个代码笔： https://codepen.io/anon/
-
问题内容： 我通常熟悉使用CSS刷新页脚的技术。 但是我很难在Twitter引导程序中使用这种方法，这很可能是由于Twitter引导程序本质上是响应式的。使用Twitter引导程序，我无法使用上述博客文章中描述的方法使页脚刷新至页面底部。 问题答案： 发现这里的代码片段非常适合引导 HTML： CSS：
-
我正在为一个我正在设计的网站使用Bootstrap 3。 我想有一个像这个样本的页脚。样品 请注意，我不希望它被修复，所以bootstrap navbar-fixed-bottom不能解决我的问题。我只希望它总是在内容的底部，也是回应。 CSS
-
问题内容： 有什么方法可以牢记jQuery Mobile框架的操作方式来修复页面，以便页脚始终与页面底部对齐-不管高度如何。 按照目前的情况，jQuery页面的高度将发生变化，尤其是当设备从纵向旋转为横向时，因此解决方案必须考虑到这一点。 只是为了澄清-我不需要页脚位于视口的底部，而只是为了使默认页面高度不低于视口高度而工作。 谢谢。 问题答案： 您可以在CSS文件中添加此代码： 因此，页面数据角
-
问题内容： 我的页面只有几行内容。我希望页脚被推到底部。 我不想用 又名 粘性页脚 没有jQuery，这可能吗？ 有什么建议么？ 问题答案： 还有另一种粘页脚]由瑞安既成事实不使用位置固定的：