![](/img/trans.png)
[英]I can't get any of the sticky footer tutorials I've read to work on my wordpress theme
[英]Can't get sticky footer to work in my div
我不确定是什么使我绊倒。 我以前做过,但是从来没有像这样居中和蒙版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 © 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;
}
如果我理解正确,那么您希望.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... **/
}
编辑:我刚刚看到您想要最大800px,所以您不能使用vw或%。 当使用固定或绝对位置时,它将忽略外部元素的宽度或高度。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.