uitwaa uitwaa - 4 months ago 8
CSS Question

How to place a scroll down button in the middle of split screen window?

The split screen is similar to this one here: http://codepen.io/rileyjshaw/pen/vGLvVo

I'm trying to place a scroll down button on it. How can I place this button in the center and on the bottom side of the window?

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

A solution to your problem would be to create a div with an absolute position. You could then align it to the center and to the bottom. Here some example HTML and CSS I created using the example codepen: 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;

If you require to use position: absolute inside another div, just put position: relative on the parent container.

Comments