Html 底部有粘性的页脚，没有重叠_Html_Css_Twitter Bootstrap_Footer

Html 底部有粘性的页脚，没有重叠

html css twitter-bootstrap

Html 底部有粘性的页脚，没有重叠,html,css,twitter-bootstrap,footer,Html,Css,Twitter Bootstrap,Footer,我试图让页脚粘到页面底部。如果内容较小，则页脚应位于浏览器底部。内容和页脚之间的空格应为空我尝试过各种方法，但页脚仍直接位于内容下方，而不是浏览器底部这是我的密码 <div id="content"> <a href="item.html"> <div class="col-xs-12 col-md-6 col-lg-3 item"> <div class="opacity">&

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

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

这是我的密码

<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更改为，使页脚处于绝对位置：

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

Codepen演示：

如果我理解你想要什么，你需要使你的页脚位置：固定；并在容器底部添加填充物

身体将坐在页脚后面，因此你需要比页脚高度稍大的填充物

您可以使用位置：绝对；但是，这不会在页脚上正常工作，因为它的相对容器将是视口，然后将随屏幕滚动

您可以使用jQuery实现这一点，因为您需要“窗口”的高度。在jQuery中，您可以编写：

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

当然，您可以降低页脚和页眉的高度，以便在打开页面时看到页脚

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

然后在css中可以设置：

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

.footer和#content应该在#content wrapper中

如果将页脚的位置设置为fixed，则页脚和#content将保持在使用top和left属性修复页脚的相同位置

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

这是我的解决方案（）：


粘性页脚示例
HTML{
最小高度：100%；
保证金：0
}
身体{
位置：相对位置；
最小高度：计算（100vh-125px）；
保证金：0；
填充：0 125px；
背景颜色：浅黄色；
}
海巴先生{
位置：相对位置；
最小高度：计算（100vh-125px）；
最大宽度：600px；
背景色：青色；
保证金：0自动；
}
劳巴先生{
位置：绝对位置；
高度：125px；
底部：0；
宽度：100%；
背景色：#345995；
颜色：白色；
}
Lorem ipsum dolor sit amet，是一位杰出的献身者。阿利奎姆·帕特·瓦普塔特·康莫多。我是拉奥里特的威尼斯人。这是一种预防疾病的有效方法。达比布斯显贵酒店中的显贵吊牌。不可使用任何元素。无便利。但是，我，弗林尼利亚·阿尼西和埃吉斯塔·波特。虎口浮雕和肘部浮雕同侧前庭；



我要喝一杯啤酒，要喝一杯发酵酒。这是一个很好的开端，它是一个充满活力的人，它是一个健康的人。Vivamus调味品，即席amet sagittis tempus，即席amet sagittis tempus，即席amet sapien interdum magna，即席luctus ante dolor quis erat。这是我的梦想。《浮士德》中的莫里斯，亨德雷特·萨吉蒂·尼西。在法雷特拉的多洛（Donor）用权杖。塞德在维利特埃拉特。



埃涅·埃吉特·埃尼姆（eget enim nec eros scelerisque Temporal cursus）坐在阿梅特·乌尔纳（amet urna）的座位上。这是一种发酵剂。杜伊斯·瓦里乌斯·埃尼姆·非利奥·尤里西斯·弗里利亚。自由商品吊牌，我是Pat ligula mollis eu。Nam lacinia dui和nisi varius aliquet。Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个很好的例子。莫里斯·内克·佩伦茨克侵权人。无便利。在egestas dolor中，在molestie lacinia中。这是我的荣幸。这是一个非常重要的问题。库拉比图尔·尼布·迪亚姆，卢克图斯·塞德的权杖，夸姆的萨吉提斯。在欧盟选举之前，要有尊严。两人都是一个不平等的人，一个不平等的人，一个不平等的人。
海棠。毛里斯·埃吉特（Mauris eget Concertetur felis）是一只猫科动物，属于舌骨元素。这是一个很好的例子。这是一种非欧盟智人的非阿拉伯树胶。整型eget mauris non mauris lobortis luctus。不含酒精的悬浮液。苏打水，尤伊斯莫酒。埃蒂亚姆·乌尔纳·麦格纳、马莱苏达·维塔·阿利奎姆、苏打水和阿尔库。没有最大的自由，也没有任何好处。

可能重复经典->非常感谢！但当内容较大时，页脚位于内容上方。请确保在内容最外层的包装上添加底部填充。

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

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

<!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>