lll*_*lll 15 html css twitter-bootstrap
我是Bootstrap的新手,我正在尝试将它与Symfony2一起使用.我已经有一个用于导航的主topbar sticky.我的问题是当我尝试在底部添加一个粘性的类似页脚,但它与我的内容重叠.我正在使用JQuery脚本来避免顶部导航栏的问题,如下所示:
$(document).ready(function(){
$(document.body).css('padding-top', $('#topnavbar').height());
$(window).resize(function(){
$(document.body).css('padding-top', $('#topnavbar').height());
});
});
我的主要Twig布局的结构如下:
<div class="navbar navbar-default navbar-fixed-top" id="topnavbar">
<div class="container-fluid">
</div>
</div>
{% block body %}
{% endblock %}
<footer class="footer navbar-fixed-bottom">
</footer>
我的CSS是原创的.我试过margin bottom或者padding bottom但我的内容(在{%block body%}中)的重叠始终存在,我不知道该怎么做才能修复它.有没有人有想法？
Wad*_*ade 29
这是一个较旧的主题,未选择答案.
我正在使用一个新的Bootstrap模板,将他当前的主题移植到Bootstrap中.
我有一个粘头,并希望在锁定到底页脚ALL倍.我有它工作,但当我重新调整大小以查看响应时,页脚重叠内容.我需要在"内容"和"页脚"之间有一个填充/空格,所以它看起来并没有合在一起.
身体标签上的边缘底部不起作用,它在我的页脚下面增加了一个间隙.当您考虑边距在"body"标签上的行为时,这才有意义.
正确的答案是在body标签上使用"padding-bottom".我使用比我的页脚高度大6个像素的尺寸来确保这个小的填充/间距.
body {
padding-bottom: 120px;
}
.footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 114px;
}
你的高度当然会有所不同.希望这可以帮助!
fru*_*ous 12
作为标准,这是Bootstrap页眉和页脚的预期行为 - 它们粘在顶部或底部,并与主要内容重叠.页脚的解决方案是添加margin-bottom: [footer height];到body,如在Bootstrap站点上的自定义示例中:
粘footer.css
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
你margin-bottom在提问中提到,如果这对你不起作用,也许你可以发帖实际尝试过？
PS这可能与Symfony无关!
有一个新的基于 flex-box 的解决方案。
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1;
}<body>
<header>Hey</header>
<main>Here some content</main>
<footer>And a perfect sticky footer without overlapping</footer>
</body>| 归档时间： |
|
| 查看次数： |
30053 次 |
| 最近记录： |