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

Question

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

我尝试将位置：“粘性”从“绝对”放置并放置“索引= -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://stackoverflow.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

首先，你的身体缺少身高属性。它没有到达底部，所以你必须给它一个高度。 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://stackoverflow.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>

Answer 2

您可以将粘性元素的顶部属性设置为 calc 100vh（屏幕尺寸）和元素的高度（例如 85px），如下所示：

.logos {
    top: calc(100vh - 85px);
}

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

问题描述投票：0回答：2

2个回答

最新问题

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

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2