在响应式网站的最底部创建粘性导航栏时遇到问题

Question

我在图片下方创建了一个导航栏来显示各种社交媒体平台的图标。但是，我试图将这些图标放在网站的最底部，并根据屏幕大小（PC 和移动设备）使其响应。

我试过从 'absolute' 放置位置：'sticky' 并放置 'index = -999'，但似乎效果不佳。

这是我的：

HTML

 <div class ="bottom">
        <div class = "logos">
            <a href="https://github.com/j-ahn94" target="_blank" class="fa fa-github"></a>
            <a href="https://whosebug.com/users/14266888/jason-a" target="_blank" class="fa fa-stack-overflow"></a>
            <a href="https://www.linkedin.com/in/jasonja-ahn/" target="_blank" class="fa fa-linkedin"></a>
        </div>
    </div>

CSS

/*Adding body and * as it might be relevant to my problem*/

body {
    background-color: black; /*rgb(241, 233, 233);*/
    display: flex;
    flex-direction: column;
    
}

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.logos {
    background-color: black;
    overflow: hidden;
    position: sticky;
    bottom: 0;
    width: 100%;
    z-index: -999;
}

.logos a {
    background-color: black;
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
    font-size: 17px;
    position: sticky;
}

Answer 1

首先，您的 body 缺少高度属性。它没有到达底部，所以你必须给它一个高度。 vh 应该可以解决问题。（100vh）。这意味着您的文档将始终至少具有正在访问它的设备的高度。

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    background-color: black; /*rgb(241, 233, 233);*/
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.bottom {
   margin-top: auto;
}
.logos {
  display: flex;
   flex-direction: row;
}
.logos a {
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
    font-size: 17px;
}

<body>
    <div class="bottom">
      <div class = "logos">
        <a href="https://github.com/j-ahn94" target="_blank" class="fa fa-github">Text 1</a>
        <a href="https://whosebug.com/users/14266888/jason-a" target="_blank" class="fa fa-stack-overflow">Text 2</a>
        <a href="https://www.linkedin.com/in/jasonja-ahn/" target="_blank" class="fa fa-linkedin">Text 3</a>
      </div>
  </div>
</body>

在响应式网站的最底部创建粘性导航栏时遇到问题

Having trouble creating a sticky navigation bar at the very bottom of the responsive website

html

css

navigation

sticky

navbar