当没有内容时，在页面底部粘贴页脚

时间：2016-12-02 09:33:37

标签： html css twitter-bootstrap

我正在使用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;
}
/*  */

4 个答案:

答案 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'))

＆＃13;
＆＃13; 
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;
＆＃13; 
*, *: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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题