CSS底部：0;位置：绝对;父母职位：亲属;不工作

Question

在this page，我在头像下面有导航菜单.slider-btm（＆＃34;品牌推广，打印，网站和电影，显示器和标牌＆＃34;），其中包含：

.slider-btm {
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 60px;
    z-index: 10;
}

和父母：

<div class="slider-outer-wrapper" style="position:relative">

导航菜单.slider-btm不在屏幕底部。我看到以下内容：

我希望此菜单位于底部，如brand.insightdesign.com.au

底部的菜单

帮助表示赞赏。

Answer 1

您想要在滚动时将栏固定在屏幕底部吗？

使用position: fixed

.slider-btm {
    position: fixed;
    width: 100%;
    bottom: 0;
    height: 60px;
    z-index: 10;
}

Answer 2

以超基本的方式，该网站（您已从问题中移除）将使容器测量窗口的高度并将窗口的高度附加到标题（容器），然后绝对定位菜单到这个容器的底部（参见一个非常粗略的例子的代码）

.container {
background:red;
position:relative;
height:100vh;
}
li {
list-style:none;
float:left;
}
.menu {
position:absolute;
bottom:0;
width:100%;
background:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div class="container">
<div class="menu">
  <ul>
  <li>Link</li>
  <li>Link</li>
  <li>Link</li>
  <li>Link</li>
  </ul>
</div>
</div>
<h1>This is more content</h1>

如果您需要进一步解释，请告诉我。

---更新---

只需将height:100vh添加到容器高度，而不是使用JavaScript来计算浏览器窗口的高度。这将使容器高度与浏览器高度相匹配，为您提供相同的结果（仅通过CSS而不是JavaScript - 增加了积极的一点，如果用户调整屏幕大小，您不必将此值分配给调整大小）。我已经更新了上面的代码。

---进一步更新---

谢谢，通过将.slider-btm移出.slider-outer-wrapper容器，这可以解决您的问题，以便.slider-btm可以放在容器的底部，即100vh。

Answer 3

我认为问题在于设备的屏幕分辨率不同，将此行添加到＆＃34; slider-outer-wrapper＆＃34;类

TypeError: only integer scalar arrays can be converted to a scalar index

您已添加max-height属性，请将其删除

删除后