1
我不知道是什么让我绊倒。我之前做过这个，但从来没有像这样做过一个中心和蒙面的div。我正在使用流星，但我认为这不会妨碍我。如果我使用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 © 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;
}