Question

我试图让页脚粘到页面底部。如果内容很小，则页脚应位于浏览器的底部。内容和页脚之间的空格应为空。

我尝试了各种方法，但页脚直接位于内容之下，而不是浏览器的底部。

这是我的代码

<div id="content">        
    <a href="item.html">
        <div class="col-xs-12 col-md-6 col-lg-3 item">
            <div class="opacity"></div>
            <div class="box_bg">
                <h4 class="color1">Headline</h4>
                <p>Description</p>                    
            </div>
        </div>
    </a>
    <a href="item.html">
        <div class="col-xs-12 col-md-6 col-lg-3 item">
            <div class="opacity"></div>
            <div class="box_bg">
                <h4 class="color1">Headline</h4>
                <p>Description</p> 
            </div>
        </div>
    </a>
</div>
<footer class="bar bar-tab">        
    <a class="tab-item" href="#">
        Home
    </a>  
</footer>

CSS：

#content{
    min-height: 100%;
}
footer{
    height: 50px;
    position: relative;
    bottom: 0;
}

Answer 1

如果我理解你想要的东西，你需要让你的页脚位置：固定;并将padding-bottom添加到容器中。

正文将位于页脚后面，因此您需要的填充略大于页脚的高度。

https://jsfiddle.net/c0Lrcg4s/

#content{
    min-height: 100%;
    padding-bottom:60px;
}
footer{
    height: 50px;
    position: fixed;
    bottom: 0;
}

你可以使用position：absolute;但是，这不能正常工作，因为它的相对容器将是视口，然后将随屏幕滚动。

Answer 2

尝试更改您的css以使页脚位于absolute位置：

footer{
    height: 50px;
    position: relative;
    bottom: 0
}

Codepen演示：http://codepen.io/anon/pen/NRxQQP

Answer 3

您可以使用jQuery执行此操作，因为您需要“窗口”的高度。在jQuery中你可以写：

var height = $(window).height();
$("#content-wrapper").css({height : height});

当然，您可以减小页脚和页眉高度的高度，这样您在打开页面时就会看到页脚。

获取此高度变量的最佳方法是在.resize（）fincton中。

然后在css中你可以设置：

#content-wrapper{
position:relative;
}
.footer{
position: absolute;
bottom: 0;
}

.footer和#content应该在＃content-wrapper

中

Answer 4

如果您将页脚的位置设置为固定，它将保持与使用顶部和左侧属性修复它的位置相同。

footer{
    height: 50px;
    **position: fixed;**
    bottom: 0;
}

Answer 5

这是我的解决方案（JSFiddle）：

<!DOCTYPE html>
<html>
<head>
<title>Sticky footer example</title>
<meta name="viewport" content="width=device-width, initial-scale=.75,user-scalable=yes">
<meta charset="UTF-8">
<style>
HTML {
    min-height:100%;
    margin:0
}
BODY {
    position:relative;
    min-height:calc(100vh - 125px);
    margin:0;
    padding:0 0 125px;
    background-color:lightyellow;
    }
.highbar {
    position:relative;
    min-height:calc(100vh - 125px);
    max-width:600px;
    background-color:cyan;
    margin:0 auto;
    }
.lowbar {
    position:absolute;
    height:125px;
    bottom:0;
    width:100%;
    background-color:#345995;
    color:white;
    }
</style>
</head>

<body>
<div class="highbar">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat vulputate commodo. Aenean venenatis posuere mi id laoreet. Proin pretium dolor vulputate, efficitur eros congue, iaculis mi. Suspendisse dignissim neque in dapibus dignissim. Donec elementum erat rhoncus neque blandit maximus. Nulla facilisi. Ut arcu mi, fringilla ac nisi et, egestas porta est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
<br><br>
Duis iaculis dui id mi dictum, vel lobortis velit fermentum. Nulla est arcu, pellentesque ac risus vitae, iaculis consequat enim. Vivamus condimentum, ex sit amet sagittis tempus, ex sapien interdum magna, et luctus ante dolor quis erat. Fusce et lorem eget nibh mattis pharetra. Mauris in faucibus lectus, hendrerit sagittis nisi. Donec scelerisque consequat dolor in pharetra. Sed in velit erat.
<br><br>
Aenean eget enim nec eros scelerisque tempor cursus sit amet urna. Praesent dignissim neque id posuere fermentum. Duis varius enim non leo ultricies fringilla. Suspendisse commodo nisi libero, id volutpat ligula mollis eu. Nam lacinia dui et nisi varius aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit rutrum nisl, placerat finibus arcu malesuada sit amet. Mauris nec pellentesque tortor. Nulla facilisi. In egestas dolor in molestie lacinia. Nullam dignissim maximus dolor a aliquet. Fusce sed leo a nisi lobortis sagittis id vitae nisi. Curabitur nibh diam, scelerisque in luctus sed, sagittis in quam. Quisque dignissim molestie ante eu eleifend. Duis hendrerit aliquam neque, nec luctus urna egestas nec.
</div>
<div class="lowbar">
    Phasellus ac rutrum quam. Mauris eget consectetur felis, id elementum ligula. Phasellus molestie nulla nec leo semper vulputate. Sed id metus non arcu rutrum pretium non eu sapien. Integer eget mauris non mauris lobortis luctus. Suspendisse non est lacinia lacus sollicitudin consequat. Sed sodales euismod ultricies. Etiam urna magna, malesuada vitae aliquam at, sodales sed arcu. Nullam maximus libero id nisl accumsan blandit.
</div>

</body>
</html>

底部粘滞的页脚没有重叠

5 个答案: