Bootstrap：100％高度的页脚

Question

我的页脚高度有问题。

在移动网站上，页脚符合我的预期，但当我在桌面上查看时，背景颜色消失了。

这就是我在桌面上看到的内容：

这是我的代码：

＆＃13;

＆＃13;

if(position == firstPosition || position == secondPosition){
      holder.txtView.setTextColor(colorId);
}

＆＃13;

    footer {
      background-color: #232323;
      height: 100%;
      border-top: #ebe050 5px solid;
    }
    footer .widget-title {
      color: #ebe050;
    }
    footer .widget-content {
      color: #eaeaea;
    }

＆＃13;

＆＃13;

＆＃13;

非常感谢你的帮助！

Answer 1

很少。

您可以从footer场景中移除footer .widget-*whatever*，因为浏览器只会选择类.widget-*whatever*的任何内容 - 但这完全取决于您。

第二件事，您可以做的是将height更改为min-height，但请确保页脚所在的容器有一个 SET HEIGHT ，否则会有一个百分比你的身高将毫无意义（因为浏览器怎样才能占用一定比例？）。拥有min-height，这会强制元素至少为100％ - 这意味着如果你没有填满整个空间，你底部会有空白，但是如果你使用max-height，那么将是给定或更小的设定高度，意味着一切看起来正常，如果它适合给定的空间。

希望这个答案可以解决你的问题。

CSS 适合您。

footer {
    background-color: #232323;
    min-height: 100%; /*Make sure the container for the footer has a set height*/
    border-top: #ebe050 5px solid;
}
.widget-title {
    color: #ebe050;
}
.widget-content {
    color: #eaeaea;
}

您可以尝试max-height和min-height，看看哪种方式最适合您。

Answer 2

把div class =＆＃34; row＆＃34;在页脚标记内部，因此页脚应包含行和列。

更新：工作示例： http://www.bootply.com/render/ZnruhjLe8C