A free library of HTML, CSS, JS

Search This Blog

Thursday, 30 March 2017

Height:100vh doesn't work correctly with content in the div

<!DOCTYPE html>

<html lang="en" xmlns="">
    <meta charset="utf-8" />
    <title>Height:100vh doesn't work correctly with content in the div</title>
<style type="text/css">
    .intro { color: #fff;height: 100vh; background: url('yourimage.jpg') no-repeat center center; background-size: cover;  position: absolute;bottom: 2em; }
    p.hello {margin: 30px; }
    .page1 {color: #fff; height: 100vh; background: beige; }
    .page2 {color: #fff; height: 100vh; background: black; }

    <div class="container">
        <div class="row">

            <div id="intro" class="intro">

                <div class="text-center">
                    <p class="hello">
                        Intro text is coming soon!
                    <div class="col small-col-12 intro--buttons">
                            Buttons coming here.


            <div id="page1" class="col col-12 page1">
                <p>Tekst test</p>

            <div id="page2" class="col col-12 page2">
                <p>Tekst test.</p>


No comments :

Post a Comment