Question

我的页脚在不同页面上的行为不同。它应该总是在我的内容下，当内容太少时，它应该在页面的底部。我不想要一个FIXED页脚，所以我不确定它应该有什么位置..

这是css

#footer {
margin-top: 200px; /* Height of the footer */
    position: fixed;
    bottom: 0;
    width: 100%;
}

#footer .row {
    margin-left: 0;
    margin-right: 0;
}

#footer .middle {
    background: transparent url(../images/footerachtergrond.svg) no-repeat center 5%;
    background-size: cover;
    padding-bottom: 150px;
    height: 100px;
    width: 100%;
}

.footerlogo {
    width: 250px;
    margin: 20px 0;
}

#footer .bottom {
    background: #c40129;
    color: white;
}

这是html

<footer id="footer">
        <div class="row middle">

        </div>
        <div class="row bottom">
            <div class="container">
                <div class="col-xs-4 col-sm-5">
                    <img class="footerlogo" src="{{ URL::to('/images/logo_typografics_white.png') }}">
                </div>
                <div class="col-xs-8 col-sm-7">

                </div>
            </div>
        </div>
    </footer>

Answer 1

margin-top用于测量元素的外部距离

height属性设置元素的高度。也删除固定位置

#footer {
    height: 200px; /* Height of the footer */
        bottom: 0;
        width: 100%;
    }

Answer 2

尝试清除：你的页脚，不要忘记清除你的容器div，例如将clearfix类添加到您的页脚div

.clearfix:after {
    content: " "; /* Older browser do not support empty content */
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

<footer class="clearfix"></footer>

也为内容div添加了clearfix 删除所有位置到你的页脚，你可以使用位置相对，它会没关系

页脚一直在错误的地方

2 个答案: