如何在加载时将元素定位在屏幕底部但不使其固定？答案

【问题标题】：How to position an element at the bottom of the screen on load but not make it fixed?如何在加载时将元素定位在屏幕底部但不使其固定？
【发布时间】：2016-11-26 10:57:05
【问题描述】：

我正在尝试在页面底部放置一个 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 */
}

【问题讨论】：

您必须在 100% 的屏幕上控制内容的高度。
是的，我的每个主要部分都有以下类： .full-screen { height: 100vh; }
请为其他人创建一个 jsfiddle 以可视化您被击中的位置。否则，人们会建议，然后你最终会一点一点地添加代码片段。就像.full-screen 不在问题中。有人怎么知道它的存在？
如果它与站点的其余部分一起滚动，为什么该部分底部有一个新的 V 形向下箭头？第一个 V 形向下箭头会消失吗？
好点@ganeeshkumar jsfiddle - jsfiddle.net/51mty7rm/7

标签： css html twitter-bootstrap twitter-bootstrap-3 css-position

【解决方案1】：

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

div { height : 10vh }

这意味着您的 div 的高度与显示的每个视口的 10% 一样长。之后得到一个相对位置和 90vh 顶部

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

不是 => 高度 + 顶部 = 100
希望有用

【讨论】：

【解决方案2】：

可能有几种方法可以解决这个问题，但绝对定位与几个 CSS3 功能相结合是我的第一个想法。使用top:100vh 将人字形发送到屏幕底部，然后使用translateY(-100%) 将其带到底部上方（因此它不在开始时的视口下方）：

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

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

【讨论】：

@DarrylMendonez 仅供参考，绝对位置不会像 OP 期望的那样运行。它必须被修复。它实际上会从屏幕顶部保持 100vh，例如页面的高度为 300vh，它不会随之移动。它需要位置：固定。
@zsawaf OP的意图是人字形“与页面的其余部分一起滚动” - 即。它不应固定在窗口中的某个位置，而应在滚动页面时随内容移动。 position:fixed 与此完全相反；它将元素附加到屏幕上的某个位置，即使滚动页面也不会移动。
你搞错了。我在我的 sn-p 中设置了案例，尝试分叉并将其更改为绝对，看看会发生什么。
@zsawaf 我不认为 OP 希望相同的箭头在整个页面中持续存在，基于 OP 的要求，即单击它时，“[页面] 将滚动到下一部分并将会有一个新的雪佛龙向下箭头”。如果您将 V 形固定在屏幕上，则与这一点相冲突，因为它永远不会消失，因此在页面后面永远不需要“新 V 形”。
哦，好吧，如果是这样的话，我误解了这个问题。道歉。