如何使用bootstrap制作粘性页脚？

在遵循n个粘性页脚教程后，我卡住了。
任何人都可以解释我的粘脚在哪里出错？
主要想法是页脚位于页面的底部。
如果页面大于窗口，那么在向下滚动页面之后页脚应该可见。如何使用bootstrap制作粘性页脚？

该代码适用于主页，因为它应该除了在页脚下方留出一点空间之外。
一旦内容大于窗口，页脚停止工作。

CSS：

html, body { 
    min-height:100%; 
    height:100%; 
    margin: 0; 
    padding:0; 
    font-family: 'Open Sans', sans-serif; 
    background-color: #2b2d2f; 
    color: #d9edf7; 
} 
#wrap { 
    min-height: 100%; 
    /* equal to footer height */ 
    margin-bottom: -30px; 
} 

#wrap:after { 
    content: ""; 
    display: block; 
} 

#footer, #wrap:after { 
    height: 30px; 
} 
#footer{ 
    background-color: #2b542c; 
    text-align:center; 
}

HTML：

<div id="wrap"> 
... content... 
</div> 
<div id="footer"> 
... content ... 
</div>

来源

2016-11-10 Dylan Westra

请考虑重新定义您的“粘性”的想法，这是粘在整个页面或到窗口底部的底部，另外，你所提供的链接不起作用 – Simplicity

@Simplicity谢谢。我编辑了这个问题 –

-1

#footer { 
    background-color: #2b542c; 
    text-align: center; 
    position: fixed; 
    width: 100vw; 
    top: calc(100vh - 30px); 
}

如果你改变你的页脚风格，这就是你将得到的是一个置顶页脚即响应，并将努力不管它的父元素大小如何设置，因为它依赖于屏幕。

来源

2016-11-10 16:04:24 Breezer

这是一个很棒的方式来让粘脚到窗口！但不是我所要求的。这个想法是让它在内容之下变得粘稠。或者如果内容太小，不能让它粘在底部 –

你的第一个问题很不好解释，我对不理解的道歉。 – Breezer

您可以在#wrap上使用min-width。看看这个Codepen

就像：

#wrap { 
    min-height: calc(100vh - 30px); /* '30px' - Height of the footer */ 
}

希望这有助于！

来源

2016-11-10 16:05:19

html { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 
body { 
 
    margin: 0 0 100px; /* bottom = footer height */ 
 
} 
 
footer { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    height: 100px; 
 
    width: 100%; 
 
    background-color:red; 
 
}

<body> 
 
    <nav></nav> 
 
    <article>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</article> 
 
    <footer></footer> 
 
</body>

来源

2016-12-01 16:38:37

如何使用bootstrap制作粘性页脚？

回答

相关问题