我正在尝试创建一个延伸到屏幕底部的三列布局,该布局使用 Zurb Foundation 网格。
基本结构包括三列,每列中间有一个标题和一个独特的背景图像,以及一个页脚。
这就是我要实现的目标(三种颜色将是背景图像):
问题在于,由于没有足够的内容来填满屏幕,所以我的列不会延伸到底部。我已经能够使用此技术将页脚固定到页面底部 https://css-tricks.com/snippets/css/sticky-footer/ . 但结果看起来像这样:
这是我的 html:
<div id="content-wrapper">
<div class="row collapse">
<div class="small-centered large-uncentered large-4 columns episode">
<div class="episode-titles">
<h1>Column01</h1>
</div><!-- ends episode titles-->
</div><!-- ends episode-->
<div class="small-centered large-uncentered large-4 columns episode" >
<div class="episode-titles">
<h1>Column02</h1>
</div><!-- ends episode titles-->
</div><!-- ends columns-->
<div class="small-centered large-uncentered large-4 columns episode" style="background-image:url('{{ featured_image }}');">
<div class="episode-titles">
<h1>Column03</h1>
</div><!-- ends episode titles-->
</div><!-- ends columns-->
</div><!-- ends row collapse-->
</div>
这是我的 CSS:
body, html {
height: 100%;
}
#content-wrapper {
min-height: 100%;
margin-bottom: -90px;
}
#footer, #content-wrapper:after {
height: 90px;
}
#content-wrapper:after {
content: "";
display: block;
}
#footer {
background-color: #161616;
border: none;
}
.episode {
max-width: 100%;
background-size: cover;
background-position: center center;
text-align: center;
height: 100%;
}
.episode-titles {
text-align: center;
display: inline-block;
vertical-align: middle;
}
最佳答案
这是我的方法的 fiddle : JSFiddle
不过对于页脚,我只是使用 position: fixed 代替。关键是您还需要指定父元素的高度,content-wrapper
、row
等。
虽然我这样做的方式唯一需要注意的是,row-footer
div 的位置是固定的并且 z-index 为 1。因此它基本上悬停在 3 列上。因此,这意味着如果这些栏中确实碰巧包含靠近底部的任何内容,则有可能覆盖它。
关于html - 无法使 zurb 基础列拉伸(stretch)到页面底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33572409/