在zurb基金会的页脚部分高度问题

Question

我有一个带滑块的简单页面，几张图片和一个页脚部分。

我希望页脚部分为全宽并且最小高度为100px，并且还占用屏幕上的所有可用空间。我这样做的方式是它需要比通常的空间更多的v。滚动条。

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

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

我不确定为什么它会以这种方式表现。

Answer 1

您是否希望此结果显示在JSFIDDLE

中

我已修改了您的JSFIDDLE

我做了以下事情

从height:100%;

中删除.fullWidth

并将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;
 }
}