我正在使用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;
}
/* */
答案 0 :(得分：2)
我已在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％宽，那么它是有用的 - 比使用容器流体
答案 1 :(得分：1)
position:fixed和bottom:0似乎对我有用。这可能是因为页脚的背景颜色是透明的，您必须通过页脚查看内容。请尝试使用以下代码作为页脚
.footer {
position: fixed;
bottom: 0;
background-color: #000;
width: 100%;
z-index: 1;
}
答案 2 :(得分：1)
尝试绝对定位页脚，并为身体定义最小高度等于100vh：
body { background-color: #5f5; width: 100%; margin: 0; padding: 0; -webkit-font-smoothing: antialiased;
min-height: 100vh;}
.footer {
position: absolute;
bottom: 0;
}
这里是JSFiddle
注意：您的HTML包含一些错误。
答案 3 :(得分：1)
对不起，我昨天无法弥补，因为我太忙了。
以下是我要向您解释的一个例子。
由您决定如何与您的应用集成。
基本上，我所做的只是检查内容是否小于或等于零。然后在页脚上添加样式。
尝试添加内容。 https://jsfiddle.net/4k5dsrmt/1/
尝试在页脚上添加一些文字。这将是动态的。而且还可靠你的css流动性。
当我说内容时，我的意思是有任何.product-container。
您还可以检查它是否有课程。对我来说，检查高度也和检查课程一样好。以下是如何检查课程的。
if(content.classList.contains('product-container'))
let content = document.getElementById('content'),
footer = document.getElementById('footer'),
checkContent = () => {
if(content.clientHeight <= 0) {
footer.style.position = 'absolute';
footer.style.bottom = '0';
footer.style.marginTop = '-' + footer.clientHeight;
}
};
checkContent();
window.onresize = checkContent;*, *:before, *:after {
margin: 0;
padding: 0;
}
footer#footer {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
background: red;
color: white;
}<div id="content"></div>
<footer id="footer">
<p>This is your footer</p>
<p>This is your footer</p>
<p>This is your footer</p>
<p>This is your footer</p>
<p>This is your footer</p>
</footer>