底部的粘性页脚没有重叠

Question

我正在尝试让页脚贴在页面底部。如果内容很小，页脚应该在浏览器的底部。内容和页脚之间的 space 应该是空的。

我尝试了各种方法，但页脚仍然直接在内容下方，而不是在浏览器底部。

这是我的代码

<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

尝试将 css 更改为 absolute 定位的页脚：

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

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

Answer 2

如果我明白你想要什么，你需要让你的页脚位置：固定；并将 padding-bottom 添加到您的容器中。

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

https://jsfiddle.net/c0Lrcg4s/

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

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

Answer 3

您可以使用 jQuery 执行此操作，因为您需要 'window' 的高度。在 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

如果您将页脚的位置设置为固定，它将停留在使用 top 和 left 属性固定它的相同位置。

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>

底部的粘性页脚没有重叠

Sticky footer on bottom without overlapping

html

css

footer

twitter-bootstrap