我正在使用 Bootstrap，我想把我的页脚放在窗口的底部，经过几个小时的尝试和在互联网上的搜索，我没有任何进展，我觉得被困在这上面，所以这就是我的原因问你:
当内容为空时，如何设法将页脚放在窗口底部？
解决方案必须是响应式的，因为网页在手机上使用最多。我试过 position: absolute; bottom: 0; 在页脚上，但仍然无法正常工作，如果有人可以帮助我，我将不胜感激 :)
当我说内容时，我的意思是有任何 .product-container。
感谢阅读。
这是我的代码:
我创建了一个 bootply .
HTML
<div class="container" style="">
<div class="row">
<div class="col-md-12 hiddemobile">
<div class="row">
<div class="col-xs-3 separate">
<img style="width: 135px;" src="./img/logo.gif">
</div>
<div class="col-xs-9">
<ul class=" nav navbar-nav navbar-right margin-t-10">
<li><span>Warenwert: 999,99 €</span></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-globe"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-user"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown ">
<a href="#" class="padding-r-0 dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-shopping-cart icon-flipped"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row">
<nav class="navbar navbar-default">
<div class="collapse navbar-collapse r-paddingmobile l-paddingmobile">
<ul class="nav navbar-nav">
<li class="active"><a href="#">All products <span class="sr-only">(current)</span></a></li>
<li><a href="#">Super mega category</a></li>
<li><a href="#">Golosinas</a></li>
<li><a href="#">category</a></li>
<li><a href="#">Super mega category</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div class="clearfix"></div>
</div>
<div class="col-md-12">
<div class="row ">
<div class="col-md-3 col-sm-4 col-xs-6 padding-5 ">
<div class="product-container">
<a href="#product">
<div class="col-xs-12 absolute-top padding-5 padding-r-10">
<div class="f-right">
<span class="bullet green">⬤<span>
</span></span></div>
</div>
<img class="col-xs-12" src="./img/product.jpg">
</a>
<div class="col-xs-12 bg-faded-white padding-t-5 padding-b-5 ">
<div class="row">
<a href="#product">
<div class="col-xs-12 col-sm-6 col-lg-7 padding-8-l-mobile padding-8-r-mobile">Artikelname</div>
<div class="col-xs-10 col-sm-4 col-lg-3 fullmex-color padding-8-l-mobile padding-8-r-mobile"> 99999,99€ </div>
</a>
<div class="col-xs-2 col-sm-2 col-lg-2 padding-b-5 padding-r-10 padding-8-l-mobile padding-8-r-mobile">
<span class="f-right glyphicon glyphicon-shopping-cart icon-flipped fullmex-color"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 footer">
<div class="row">
<div class="col-xs-12 col-md-6" style="">
<ul class="hlist">
<li><a href="#">Datenshuttz</a></li><li>|</li>
<li><a href="#">AGB</a></li><li>|</li>
<li><a href="#">Kontakt</a></li><li>|</li>
<li><a href="#">Impressum</a></li>
</ul>
</div>
<div class="col-xs-12 col-md-6" style="">
<ul class="hlist pull-right f-left-mobile">
<li><a>© FULLMEX Advertising media fullservice</a></li>
<li class="hiddemobile" style="padding-left: 15px"><a>powered by</a></li>
<li class="hiddemobile"><a><img class="fullmex-fill-hover" src="http://aramark.fullserviceshop.dev/store/modern/img/Fullmex-Logo-2c.svg" alt="Fullmex"></a></li>
</ul>
</div>
</div>
</div>
</div>
CSS
/* CSS used here will be applied after bootstrap.css */
body { background-color: #fff; width: 100%; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }
.separate {
margin-top: 5px;
margin-bottom: 5px;
}
.t-algin-center {
text-align: center;
}
.color-light {
color: #bebebe;
}
.font-light {
font-family: RobotoLight;
}
.font-medium {
font-family: RobotoMedium;
}
.article-title {
font-size: 18px;
}
.article-num {
font-size: 18px;
color: #bebebe;
}
.article-desc {
margin-top: 5px;
}
.product-container {
overflow: hidden;
position: relative;
border: 1px solid #f0f0f0;
}
.absolute-top {
position: absolute;
top: 0;
z-index: 1;
}
.absolute-bottom {
position: absolute;
bottom: 0;
z-index: 1;
}
.product-container .glyphicon {
font-size: 14px;
}
.product-container .glyphicon:hover {
cursor: pointer;
}
.footer > div > div{
min-height: 50px;
color: #bebebe;
}
.footer ul {
display:table-row;
}
.footer ul li
{
display: table-cell;
height: 50px;
list-style-type: none;
vertical-align: middle;
}
.footer ul li a {
color: #bebebe;
display:table-cell;
vertical-align: middle;
text-decoration: none;
}
.footer ul li a:hover {
color: var(--main-color);
}
.product-image .img-responsive {
margin: 0 auto;
}
.brand {
position: absolute;
left: 50%;
display: block;
}
.no-borders {
border: none;
}
.btn-custom {
border: none;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 0;
font-size: 18px;
}
.btn-1 {
background-color: var(--main-color);
color: #fff;
}
.btn-1:hover {
background-color: var(--main-color);
color: #fff;
}
.btn-2 {
background-color: rgb(50,50,50);
color: #fff;
}
.btn-2:hover {
background-color: var(--main-color);
color: #fff;
}
.glyphicon.active {
color: var(--main-color);
}
.border-default{
border: 1px solid #f0f0f0;
}
.border-b-default {
border-bottom: 1px solid #f0f0f0;
}
.border-b-fullmex {
border-bottom: 1px solid var(--main-color);
}
.border-fullmex {
border: 1px solid var(--main-color);
}
.white-bg-hover:hover {
background-color: #fff !important;
}
.white-bg-active:focus {
background-color: #fff !important;
}
.mini-menu {
cursor: pointer;
}
.mini-menu:not(.collapsed) .glyphicon {
color: var(--main-color) !important;
}
.navbar-default .navbar-nav > li > a {
color: rgb(50,50,50);
}
.navbar-toggle .icon-bar {
height: 3px;
color: #bebebe;
}
.navbar-nav > li > a {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.navbar-nav > li > a:after {
content: '';
opacity: 0.8;
display: block;
margin: auto;
height: 1px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.navbar-nav > li > a:hover:after {
width: 100%;
background: var(--main-color);
}
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
.profile-info {
cursor: pointer;
height: 75px;
}
.profile-info .glyphicon {
color: white;
}
.profile-info .icon {
height: 75px;
line-height: 63px;
}
.bg-blue {
background-color: #00c0ef;
}
.border-blue {
border: 1px solid #00c0ef;
}
.white {
color: #ffff;
}
.bg-red {
background-color: #dd4b39;
}
.border-red {
border: 1px solid #dd4b39;
}
.bg-orange {
background-color: #f39c12;
}
.border-orange {
border: 1px solid #f39c12;
}
.bg-green {
background-color: #00a65a;
}
.border-green {
border: 1px solid #00a65a;
}
.padding-5 {
padding: 5px;
}
.padding-b-10 {
padding-bottom: 10px;
}
.padding-t-10 {
padding-top: 10px;
}
.padding-t-5 {
padding-top: 5px;
}
.padding-r-5 {
padding-right: 5px;
}
.navbar {
min-height: 20px;
margin-bottom: 0px;
}
.margin-5 {
margin-left: -5px;
margin-right: -5px;
}
.margin-t-5 {
margin-top: 5px;
}
.margin-t-10 {
margin-top: 10px;
}
.padding-b-5 {
padding-bottom: 5px;
}
.padding-l-0 {
padding-left: 0px !important;
}
.padding-l-5 {
padding-left: 5px !important;
}
.padding-l-7 {
padding-left: 7px !important;
}
.padding-l-15 {
padding-left: 15px !important;
}
.padding-r-0 {
padding-right: 0 !important;
}
.padding-r-7 {
padding-right: 7px !important;
}
.padding-r-15 {
padding-right: 15px !important;
}
.padding-r-10 {
padding-right: 10px !important;
}
.padding-t-b-10 {
padding-top: 10px;
padding-bottom: 10px;
}
.fs-14 {
font-size: 14px;
}
.fs-16 {
font-size: 14px;
}
.fs-18 {
font-size: 18px;
}
.fs-20 {
font-size: 20px;
}
.fs-25 {
font-size: 25px;
}
.f-right {
float: right;
}
.bg-faded-white {
background-color: rgba(255,255,255, 0.5)
}
.green {
color: lightgreen;
}
.icon-flipped {
transform: scaleX(-1);
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
}
.hlist {
padding-left: 0;
}
.hlist li {
display: inline;
list-style-type: none;
padding-right: 5px;
}
/* */
最佳答案
我已经在 bootply 修改了您的代码
我已将容器内的所有内容都包装到包装器中，该包装器的最小值为 100vh 并且具有相对位置，这意味着绝对页脚将始终位于其相对容器的底部。
您应该考虑在每个独立部分中使用容器，并将所有内容包装到包装器中，就像
<div class="wrapper">
<header><div class="container"></div></header>
<section class="content"><div class="container"></div></section>
<section class="another-section"><div class="container-fluid"></div></section>
<footer><div class="container"></div></footer>
</div>
当有另一个部分应该 100% 宽时它特别有用 - 比你使用 container-fluid
关于html - 没有内容时将页脚贴在底部窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40928855/