使用Bootstrap 4实现带有导航链接和版权信息的粘性页脚

Question

使用Bootstrap 4实现带有导航链接和版权信息的粘性页脚

htmlcssbootstrap-4

4

我试图实现 Bootstrap 4粘性页脚的示例。

如果页脚元素的子元素只有 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;
}

Footer 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>&nbsp;
                <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>&nbsp;
                <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>&nbsp;
                <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>&nbsp;
            </nav>
             <span class="text-muted">Copyright JThink Ltd 2004 - 2018 All rights reserved. All trademarks acknowledged</span>
        </footer>
    </div>

- Paul Taylor

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zim · Accepted Answer

Bootstrap 4的粘性页脚示例是一个简单文本，只有一行。因此，将line-height设置为与height（60px）相同就可以正常工作。

您的页脚有多个“行”，因此将line-height:60px设置为将使页脚呈现高度加倍。建议删除行高（因为它在示例中用于居中），并为您的内容设置适当的固定高度（约为80px）。 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（无行高）

在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 （flexbox）

相关：Bootstrap 4 - 粘性底部 - 动态底部高度