html - zurb 基金会中的页 footer 分高度问题

Question

我有一个带有 slider 、少量图像和页 footer 分的简单页面。

我希望页 footer 分是全宽的，最小高度为 100 像素，同时占用屏幕上的所有可用空间。我这样做的方式是它比通常添加 v. 滚动条需要更多的空间。

http://jsfiddle.net/57fBK/8/

<div class="row fullWidth">
    <div class="large-12 columns footer"> footer</div>
</div>

我不确定它为什么会这样。

Answer 1

你想在 JSFIDDLE 中显示这个结果吗

我已经编辑了你的JSFIDDLE

我做了以下几件事

从 .fullWidth 中移除 height:100%;

并将 min-height:100%; 添加到 .footer

CSS:

@media all and (max-width: 320px) {
.columns {
    float:none !important;
}
.small-6 {
    width:100%;
}
}

 .fullWidth {
     width: 100%;
     margin-left: auto;
     margin-right: auto;
     max-width: initial;
     background-color:red;
 }
.footer
{
   text-align:center;
   min-height:100%;
   margin:20px auto;
 }
}