Question

我正在尝试在页面底部放置一个V形箭头向下箭头，以便用户在点击时平滑滚动到下一个部分。无论屏幕的设备或尺寸如何，我都希望这个位置始终接近底部，我不希望它留在原地。它应该与网站的其余部分一起滚动。当用户点击它时，它将滚动到下一部分，并且屏幕底部还会有一个新的V形箭头向下箭头，链接到下一部分。

HTML

<div class="row chevron-down">
  <div class="col-md-12">
    <a href="#aboutus1" class="smoothScroll"><img class="img-responsive visible-xs center-block" src="img/chevron-down.png" alt="Transformative Thinking" /></a>
  </div>
</div>

CSS

.chevron-down {
  /* magic code here */
}

Answer 1

可能有几种方法可以实现，但绝对定位结合了几个CSS3功能是我的第一个想法。使用top:100vh将V形符号发送到屏幕底部，然后translateY(-100%)将其置于底部上方（因此它不会在开始时位于视口下方）：

.chevron-down {
    position:absolute;
    top:100vh;
    transform:translateY(-100%);
    width:100%;
}

这是一个Bootply来演示。希望这可以帮助！如果您有任何问题，请告诉我。

Answer 2

你可以在你的CSS中使用vh dimension（视口高度），你应该用vh给你的div一个高度，例如：

div { height : 10vh }

这意味着你的div的高度只要是显示的每个视口的10％。之后得到一个相对位置和90vh顶部

div {
    height : 10vh;
    position : relative;
    top : 90vh;
}

不是那个=＆gt;高度+顶部= 100
希望有用

如何在加载时将元素放置在屏幕底部但不固定？

2 个答案: