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


Tags: html,css,frontend

Problem :

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


Solution :

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.


    CSS Howto..

    How to center jqPagination widget?

    How to change expand div after click and collapse it after another click?

    HTML: Who takes care show/hide the scrollbar?

    How to resize image on window resize in CSS?

    How do I avoid 'bottom-aligned' labels with inline associated inputs?

    Jquery: How to find if element has inline property (not in CSS)

    How to precompile scss to a single css file in webpack?

    How do I get text to overlay on top of an image in Dreamweaver?

    How do I remove the padding between the content of the cell and the cell borders in a table? [duplicate]

    Vimeo videos not showing up in ShadowBox

    How to force a div to scale at 100% width of the current windows Browser

    How to make flash movie to scale proportunatly to div width?

    how I can set color of anything in css [closed]

    How to have background between two handles of jQuery Slider using css gradient

    Angularjs - How to have same height for the child divs when one child div's size is increased dynamically with ng-repeat

    How can I set different gradients as background, each time user refreshes?

    How to efficiently update css on multiple selector classes in jquery

    how to convert inline CSS into external CSS?

    How to position two
  • 's within a nested
      ?
  • How To Left Align the Title Using CSS

    CSS: How to produce rounded boxed list

    How to display items side by side until window width then in next row

    how to make sure image shows over my twitter bootstrap 3 input field

    how to deal with suffix and prefix in css

    How do I make this slider go faster?

    Show div when hover another div using only css

    Last inherited display property is inline but computed is block. How is this even possible?

    How to make TD behaving like TR(row) with CSS?

    How to flip which side a progress bar begins at with CSS

    How to place an image in table's right corner