我正在尝试实现 Bootstrap 4 Sticky footer例子
如果我只是将 nav 元素或 span 元素作为页脚元素的子元素，它就会起作用。但是如果我有两个元素，那么只有第一个元素有灰色背景，并且浏览器窗口的垂直高度只针对第一个元素进行调整，所以总是有一个滚动条。
我做错了什么？
屏幕截图默认只显示页脚的上半部分
自定义 CSS
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px; /* Margin bottom by footer height */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
页脚 HTML
<!-- footer -->
<div class="footer">
<footer class="text-center">
<nav class="footercontent">
<a href='http://blog.jthink.net' target='_blank' title='Jthink blog'><img src="http://jthink.net/images/blogger.png" alt="Jthink blog" title="Jthink blog" class="btn btn-outline"/></a>
<a href="https://www.facebook.com/pages/Jaikoz/15843367311" target="_blank" title="Jthink Facebook page"><img src="http://jthink.net/images/facebook.png" alt="Jthink Facebook page" title="Jthink Facebook page" height="32" width="32"/></a>
<a href="https://plus.google.com/b/103554086121439078551/+JthinkNet2/posts" target="_blank" title="Jthink Google+ page"><img src="http://jthink.net/images/google_plus.png" alt="google_plus" title="Jthink Google+ page" height="32" width="32"/></a>
<a href="http://youtube.com/jthinkltd" target="_blank" title="Jthink YouTube channel"><img src="http://jthink.net/images/youtube.png" alt="Jthink YouTube channel" title="Jthink YouTube channel" height="32" width="32"/></a>
<a href="mailto:paultaylor@jthink.net" target="_blank" title="Email Paul at Jthink"><img src="http://jthink.net/images/email.png" alt="Email Paul at Jthink" title="Email Paul at Jthink" height="32" width="32"/></a>
<a href="http://mad.ly/signups/104159/join" target="_blank" title="Subscribe to Weekly Newsletter"><img src="http://jthink.net/images/subscribe_newsletter.png" alt="Subscribe to Weekly Newsletter" title="Subscribe to Weekly Newsletter"/></a>
</nav>
<span class="text-muted">Copyright JThink Ltd 2004 - 2018 All rights reserved. All trademarks acknowledged</span>
</footer>
</div>
最佳答案
Bootstrap 4 sticky footer example是单行的简单文本，因此 line-height 与 height (60px) 相同可以正常工作。
您的页脚有多个“行”，因此设置 line-height:60px 将使页脚的渲染高度加倍。我建议删除行高(因为它在示例中用于居中)并为您的内容设置适当的固定高度(~ 80 像素)。 80px 大约是根据您想要的垂直间距。
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 80px; /* Margin bottom by footer height */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 80px; /* Set the fixed height of the footer here */
background-color: #f5f5f5;
}
https://www.codeply.com/go/IUPGbdWmF1 (无行高)
IMO，在 Bootstrap 4 中，使用 flexbox 实现粘性页脚要容易得多，因为 CSS 最少并且不需要设置固定高度。
<body class="d-flex flex-column">
<nav></nav>
<div class="container flex-grow-1"></div>
<footer></footer>
</body>
https://www.codeply.com/go/g8PBpRKaPC ( flex 盒)
关于html - 使用导航链接和版权信息实现 Bootstrap 4 Sticky Footer，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50944133/