Question

分割屏幕与此处类似：http://codepen.io/rileyjshaw/pen/vGLvVo

我试图在其上放置一个向下滚动按钮。如何将此按钮放在窗口的中央和底部？

HTML：

.half
    p These panes always split the window in the correct direction.
.half
    p
        | Pure CSS, only 5 rules.
        span.social
            | by  
            a[target='_blank' href='https://twitter.com/rileyjshaw'] rileyjshaw
            |.

CSS：

// Maximum aspect ratio beforem switching to a vertical split.
$ASPECT_W: 4
$ASPECT_H: 3

// All you need, right here:
body
    display: flex
    flex-wrap: wrap

.half
    width: 100%
    flex-basis: $ASPECT_W / ($ASPECT_W + $ASPECT_H) * 100vh
    flex-grow: 1

// Good night, and good luck.

















// Doop, de boop boop...





















// Unrelated visual styles:
html, body
    height: 100%
    width: 100%
    margin: 0

.half
    position: relative
    font: 600 32px Poppins, sans-serif
    color: #f6e8ea
    background: #ef626c
    + .half
        background: #84dcff

p
    position: absolute
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
    width: 72%
    margin: 0
    text-align: center

.social
    display: block
    max-height: 0
    opacity: 0
    animation: appear 1s 4s

a
    color: #f9eef0

@keyframes appear
    50%
        max-height: 2em
        opacity: 0
    100%
        max-height: 2em


opacity: 1

Answer 1

解决问题的方法是创建一个具有绝对位置的div。然后，您可以将其与中心和底部对齐。这里是我使用示例codepen创建的一些示例HTML和CSS：http://codepen.io/tcaer/pen/xOpjBB

HTML：

<div class="button"></div>

CSS：

 position: absolute;
 z-index: 2;
 left: 0;
 right: 0;
 margin-left: auto;
 margin-right: auto;
 bottom: 100px;

如果您需要在另一个div中使用position: absolute，只需将position: relative放在父容器上。

Answer 2

在我的情况下，我必须在屏幕中间放置一个scroll_down图标，并且在点击时也必须向下滚动到下一部分。

CSS：

scrolldown{
    position: absolute;
        z-index: 2;
        left: 45%;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        bottom: 0%;

    }

HTML：

    <div class="scrolldown">
  <a href="#sectionId"><img src="images/scroll_down_homepage.gif" /></a>
</div>

<section id="sectionId">
//Content
</section>

如何在分屏窗口中间放置一个向下滚动按钮？

2 个答案: