Question

如果我只是将 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>&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>

Answer 1

Bootstrap 4 sticky footer example是单行的简单文本，因此使size与line-height（60像素）相同可以很好地工作。

您的页脚有多个“行”，因此设置height将使页脚的渲染高度加倍。我建议您删除行高（在示例中用于居中），并为内容设置适当的固定高度（〜80px）。 80px约为。根据您想要的垂直间距。

line-height:60px

https://www.codeply.com/go/IUPGbdWmF1（无行高）

IMO，在Bootstrap 4中，由于CSS最小且不需要设置固定高度，因此在flexbox中更容易实现粘性页脚。

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/g8PBpRKaPC（弹性框）

相关：Bootstrap 4 - Sticky footer - Dynamic footer height

通过导航链接和版权消息实现Bootstrap 4粘性页脚

1 个答案: