我的头版上有一个巨型电子烟, 效果很好。我的页脚很粘, 而且效果很好。直到我把它们放在一起。包裹类破坏了超大型飞机, 但将其取出却破坏了页脚。内容也迷失在那里的混乱中。显然, 在使用超大屏幕时, 从技术上讲, 我不需要页脚固定在底部, 因为超大屏幕会将页脚推到底部, 但对于其他没有大屏幕的页面, 我需要它。
另外, 在任何人尝试使用固定页脚回答之前, 这根本不是我想要的。
小提琴
html, body {
height: 100%;
margin: 0;
}.wrap {
min-height: 100%;
width: 100%;
}.footer {
position: absolute;
width: 100%;
margin-top:-150px;
height: 150px;
background: orange;
}.jumbotron {
background-color: inherit;
position: relative;
height: 100%;
}.container-full-bg {
width: 100%;
height: 100%;
max-width: 100%;
background-position: center;
background-size: cover;
background-color: red;
}.container-full-bg .container, .container-full-bg .container .jumbotron {
height: 100%;
width: 100%;
}
<
div class="wrap">
<
div class="container-full-bg">
<
div class="container">
<
div class="jumbotron">
<
div class="row">
<
div class="col-sm-12">
my jumbotron<
/div>
<
/div>
<
/div>
<
/div>
<
/div>
<
div class="container">
<
div class="row">
<
div class="col-sm-12">
content<
br/>
content<
br/>
content<
br/>
content<
br/>
content<
br/>
content<
br/>
content<
br/>
content<
br/>
content<
br/>
<
/div>
<
/div>
<
/div>
<
/div>
<
!--/wrap-->
<
div class="footer">
my footer<
/div>
#1这就是我最终得到的…
由于我使用的是Wordpress, 因此我决定(即使我不想)检查我们是否在首页上, 并在需要的地方添加必要的样式表和div:
已添加到文档开头的header.php中。
<
?php
if(!is_front_page()) {
echo '<
link rel="stylesheet" type="text/css" href="'
. get_template_directory_uri() . '/stickyfooter.css" />
';
} ?>
...
然后, 如果我们不在首页上, 我就添加包裹
<
?php if(!is_front_page()){
//wrap the content only if we're not on the front page.
//this is to push the sticky footer down.
echo '<
div class="wrap">
';
}?>
...
在footer.php中, 我在实际页脚之前关闭wrap div
stickyfooter.css:
.wrap {
min-height: 100%;
width: 100%;
margin-bottom: -246px;
}.wrap:after {
content: "";
display: block;
height:246px;
} .footer {
clear: both;
height: 246px;
margin-top: -246px;
}
【Bootstrap, jumbotron和sticky footer】所以你有它。根据页面的布局, 我向页面提供了他们喜欢的代码。
推荐阅读
- 看完你就知道win10系统怎样制作详细说明
- 具有多语言支持的Timber和WordPress最佳做法
- Avada(WordPress主题)编译了CSS(它是从哪里编译的())
- 在WordPress 3.2.x中创建页面时缺少管理模板选择
- 在菜单顶部添加电话号码,并且应该可以在移动设备中查看
- 将WooCommerce注册表单添加到任何页面/模板
- 将小部件添加到主题激活的自定义WordPress侧边栏()
- 在WordPress中为Gravatar img添加类
- 将自定义顶级外部和自定义子菜单外部链接添加到WP Admin