无法让粘性页脚在我的 div 中工作

Question

我不确定是什么绊倒了我。我以前做过这个，但从来没有像这样在一个居中和蒙面的 div 中。我正在使用 Meteor，但我认为这不会妨碍我。如果我使用 bottom: 0px 和 position: absolute 它会将粘性推到页面底部，但它不会正确居中文本元素。如果我在调试器中检查页脚超出了我的居中 div :(

html:

    <template name="applicationLayout">
    <div id = "backgroundDiv">
    </div>

    <div id="box" class="middle">
        <div>
          <header>
              {{> logoFloat}}
              {{> navbar}}
          </header>
          {{> yield}}
          {{> footer}}
        </div>
    </div>
</template>

<template name="home">
  {{> underTitlePanel}}
  {{> imgs1}}
</template>

<template name="highScores">
  <p>High Scores</p>
</template>

<template name="faq">
  <p>FAQ</p>
</template>

<template name="wiki">
  <p>Wiki</p>
</template>

<template name="about">
  <img src="img/testContentWindow.png"/>
  <p>Yoooooo!</p>
</template>

<template name="underTitlePanel">
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example
    </div>
  </div>
</template>

<template name="imgs1">
  <div class="container-fluid">
    <div class = "row">

     <div class = "col-sm-6 col-md-3">
        <a href = "#" class = "thumbnail">
           <img src = "img/inGameShots/mathInGame1.png" alt = "Generic placeholder thumbnail">
        </a>
     </div>

     <div class = "col-sm-6 col-md-3">
        <a href = "#" class = "thumbnail">
           <img src = "img/inGameShots/mathInGame2.png" alt = "Generic placeholder thumbnail">
        </a>
     </div>

     <div class = "col-sm-6 col-md-3">
        <a href = "#" class = "thumbnail">
           <img src = "img/inGameShots/mathInGame3.png" alt = "Generic placeholder thumbnail">
        </a>
     </div>

     <div class = "col-sm-6 col-md-3">
        <a href = "#" class = "thumbnail">
           <img src = "img/inGameShots/mathConfetti.png" alt = "Generic placeholder thumbnail">
        </a>
     </div>

     <div class = "col-sm-6 col-md-3">
        <a href = "#" class = "thumbnail">
           <img src = "img/inGameShots/mathLava.png" alt = "Generic placeholder thumbnail">
        </a>
     </div>

     <div class = "col-sm-6 col-md-3">
        <a href = "#" class = "thumbnail">
           <img src = "img/inGameShots/mathAcid.png" alt = "Generic placeholder thumbnail">
        </a>
     </div>

     <div class = "col-sm-6 col-md-3">
        <a href = "#" class = "thumbnail">
           <img src = "img/inGameShots/mathSpace.png" alt = "Generic placeholder thumbnail">
        </a>
     </div>

     <div class = "col-sm-6 col-md-3">
        <a href = "#" class = "thumbnail">
           <img src = "img/inGameShots/mathTar.png" alt = "Generic placeholder thumbnail">
        </a>
     </div>

  </div>
</div>


</template>

<template name="logoFloat">
  <div id="logoFloatDiv">
    <img src="img/simpleLogo3_small.png" id="logoFloatImg"/>
  </div>
</template>

<template name='navbar'>
    <nav class="navbar navbar-custom" style="border-radius:0 !important">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Dino Math</a>
        </div>
        <ul class="nav navbar-nav">
          {{> navItems}}
        </ul>
      </div>
    </nav>
</template>

<template name='navItems'>
  <li role="presentation" class="{{ activeIfTemplateIs 'home' }}"><a href="{{pathFor route='home'}}">Home</a></li>
  <li role="presentation" class="{{ activeIfTemplateIs 'faq' }}"><a href="{{pathFor route='faq'}}">FAQ</a></li>
  <li role="presentation" class="{{ activeIfTemplateIs 'wiki' }}"><a href="{{pathFor route='wiki'}}">Wiki</a></li>
  <li role="presentation" class="{{ activeIfTemplateIs 'highScores' }}"><a href="{{pathFor route='highScores'}}">High Scores</a></li>
  <li role="presentation" class="{{ activeIfTemplateIs 'about' }}"><a href="{{pathFor route='about'}}">About</a></li>
</template>

<template name="footer">
  <footer class="footer-basic-centered">

            <p class="footer-company-motto">The company motto.</p>

            <p class="footer-links">
                <a href="#">Home</a>
                ·
                <a href="#">Blog</a>
                ·
                <a href="#">Pricing</a>
                ·
                <a href="#">About</a>
                ·
                <a href="#">Faq</a>
                ·
                <a href="#">Contact</a>
            </p>

            <p class="footer-company-name">Company Name &copy; 2015</p>

        </footer>
</template>

css:

/* CSS declarations go here */
.navbar
{
      margin-bottom: 0px;
}

#backgroundDiv
{
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: -1;

  /*background-image:url("http://cdn.collider.com/wp-content/uploads/dino-riders-poster.jpg");*/
  background-image:url("img/testChalkBackground.png");
  background-size:500px 500px;
}

#logoFloatDiv
{
  float: right;
  position: absolute;
  z-index: 10;
  margin-left:650px;
  margin-right:20px;
}

#logoFloatImg
{
  height: 100px;
  width: 100px;
}

/*.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}*/

.panel {
  border-radius: 0 !important;
}


#box {
    width: 800px;
    height: 800px;
    background-color: black;
    border-radius: 20px;
    overflow: hidden;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
}

.middle{
  margin: auto;
}

.footer-basic-centered{
    background-color: #0a7d00;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    font: normal 16px sans-serif;
}

.footer-basic-centered .footer-company-motto{
    color:  #8d9093;
    font-size: 20px;
    margin: 0;
}

.footer-basic-centered .footer-company-name{
    color:  #8f9296;
    font-size: 12px;
    margin: 0;
}

.footer-basic-centered .footer-links{
    list-style: none;
    font-weight: bold;
    color:  #ffffff;
    padding: 15px 0 10px;
    margin: 0;
}

.footer-basic-centered .footer-links a{

    text-decoration: none;
    color: inherit;
}

Answer 1

如果我理解正确，您希望 .footer-basic-centered 具有粘性并始终保持在底部。试试这个：

.footer-basic-centered{
    position:fixed;
    width:100vw;   /**I used vw which is viewport width**/
    left: 0;
    bottom:0;
    /** and rest of the css... **/
}

编辑：我刚刚看到您希望它最大为 800 像素，因此您不能使用 vw 或 %。当你使用 position fixed 或 absolute 时，它​​会忽略外部元素的宽度或高度。