根据浏览器高度将图标添加到底部div部分

Question

这是事情..我有一个网页分为2个部分（intro和main）

intro部分根据浏览器高度使用CSS扩展为100：

#intro {
  height: 100vh;
}

我想添加一个带有href的箭头，无论哪个屏幕尺寸进入页面，都会定位在intro div的底部。

你知道怎么做吗？

谢谢！

Answer 1

#intro {
    ...
    position: relative; /* or absolute, as appropriate */
}
#down_arrow {
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -25px; /* half the element's width */
}

这假设标记类似于以下内容。将来，请在您的问题中提供您的标记。

<div id="intro">
    <div id="down_arrow"> ... </div>
</div>

Answer 2

将position:relative设置为#intro元素，将position:absolute设置为箭头。

同时给出一个左下角的规则：

#arrow {
    width:40px;  /* sample width - set as you wish */
    position:absolute;
    bottom:10px;
    left:50%;
    margin-left:-20px;  /* important: set half of the width (centers the div) */
}

Answer 3

margin-top:90vh

：D和我需要写一些文字，所以stackoverflow知道我不是垃圾邮件。

Rich homie quan是一个很好的说唱歌手。我认为现在已达到极限。

Answer 4

你的意思是这样的Fiddle 我使用intro元素定位为Attempting to load the view of a view controller while it is deallocating is not allowed and may result in undefined behavior (<UISearchController: 0x7ffde14866b0>)并根据需要设置此 viewportheight 。 因此，如果我将箭头位置设置为relative，它将保留在介绍元素内。

absolute

Answer 5

使用flexbox（demo）：

<div class="intro">
  <div class="nav"></div>
    <div class="link-container">
      <a>Arrow</a>
    </div>
</div>
<div class="main"></div>

CSS：

.intro {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: blue;
}

.intro > .link-container {
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%;
}

...

Answer 6

.section2 {
  position:fixed;
  bottom:0;
}
#intro {
  position: relative;
}

添加适当的样式，使其成为屏幕的中心。

Answer 7

将箭头放在intro容器内并使用：

.arrow{
    bottom: 0px;
}

您可能还需要摆弄POSITION属性，但这应该可以满足您的需求。希望这有帮助！