相关疑难解决方法(0)

我通常熟悉使用CSS刷新页脚的技巧.

但是我在使用这种方法为Twitter引导工作时遇到了一些麻烦,很可能是因为Twitter引导本质上是响应式的.使用Twitter bootstrap我无法使用上面博客文章中描述的方法让页脚刷新到页面底部.

我有以下布局(我正在使用Meteor):

<template name="headerFooter">
    <div class="container-fluid fill-height">
        {{> header}}

        {{> UI.contentBlock}}

        {{> footer}}
    </div>
</template>

<template name="home">
    {{#headerFooter}}
        <div class="row body-film">
            <div id="newsfeed" class="col-sm-offset-7 col-sm-5 block-film">
                {{#each stories}}
                    <div class="story">...</div>
                {{/each}}
            </div>
        </div>
    {{/headerFooter}}
</template>

这个(相关)css支持它:

html {
    height: 100%;
}
body {
    min-height: 100%
} 
.fill-height {
    height: 100%;
}

在html和body元素如预期都表现.它们以任何缩放级别或大小填充其区域.

但是,添加container-fluid的fill-height课程并没有完成这项工作.它只是包装它的内容,而不是填充到底部.这是一个问题,因为它负责添加body-film和block-film页面,这只是半透明的背景,给整个事物一些颜色统一.

以下是一些屏幕截图,所有页面都缩小了,因此内容不会填充高度:

现在这里body选择了元素.正如你所看到的,它填补了父母的权利.

但container-fluid事实并非如此.

随着fill-height我都试过height和min-height,他们看起来完全一样. …

我试图强制我的页脚在我的网站底部.滚动时我不希望它粘在一起,只是在向下滚动网页时出现在底部.

目前 - 网页显示页脚位于内容下方.我添加了这样的代码bottom:0;,发现它坚持并不适合我的网站.我还添加了html, body { height:100%;}在其他stackoverflow问题上查看的代码- 但没有任何乐趣.

任何意见,将不胜感激.

代码:

    .footer {
    	background: #F37A1D;
       	position : absolute;
    	width: 100%;
    	border-top: 3px solid #F37A1D;
    }

    <div class="footer">
    <div class="container">
            <p>&copy; COMPAY 2015</p>
        </div>
    </div>

This question may be a repeat! I'd like my footer to be at the bottom of the page, but not fixed there when I scroll. I'd like it to be like the footer on the bottom of this page Footer Example. This is my footer code so far, I've been using bootstrap 4 but I can't find a class to help me with what I want.

<footer>
  <a href="#"><i class="fa fa-facebook"></i></a>
  <a href="#"><i class="fa fa-twitter"></i></a>
  <a href="#"><i class="fa fa-google-plus"></i></a> …