Any idea why my div isnt full screen

Question

I was planning to make full screen sections for a page and it was all working well until it decided not to work. I am not sure what is wrong with it but if anyone could tell me I would be grateful.

Divs:

<div class="container1">
    <a href="#cont1">
        <img src="down.png"></img>
    </a>
    <h1>Day</h1>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida ultricies suscipit. Integer in luctus enim, id varius velit. Suspendisse potenti. Quisque feugiat lectus eget est suscipit, eget aliquam mauris pharetra. Fusce aliquet dui nec mi
        pulvinar, eu volutpat diam volutpat. Integer eget neque facilisis, ornare felis ac, vulputate eros. Etiam et accumsan erat. Aenean porttitor egestas justo et vestibulum. Donec gravida dignissim neque id vehicula. Ut non nunc ut lectus placerat tempor.
        Sed porttitor ullamcorper eros, sed eleifend felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque mauris erat, consequat sed nulla et, volutpat accumsan leo. Mauris cursus aliquet magna, eu facilisis
        velit scelerisque vitae. Aliquam tristique id nisl in pulvinar. Vestibulum non adipiscing dui, a commodo lorem.
    </p>
</div>
<div class="container2">
    <a href="#cont">
        <img src="up.png"></img>
    </a>
    <h2>Night</h2>
    <p name=cont1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida ultricies suscipit. Integer in luctus enim, id varius velit. Suspendisse potenti. Quisque feugiat lectus eget est suscipit, eget aliquam mauris pharetra. Fusce aliquet dui nec mi
        pulvinar, eu volutpat diam volutpat. Integer eget neque facilisis, ornare felis ac, vulputate eros. Etiam et accumsan erat. Aenean porttitor egestas justo et vestibulum. Donec gravida dignissim neque id vehicula. Ut non nunc ut lectus placerat tempor.
        Sed porttitor ullamcorper eros, sed eleifend felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque mauris erat, consequat sed nulla et, volutpat accumsan leo. Mauris cursus aliquet magna, eu facilisis
        velit scelerisque vitae. Aliquam tristique id nisl in pulvinar. Vestibulum non adipiscing dui, a commodo lorem.
    </p>

</div>

Css:

body {
background-image: url('http://media-cache-ec0.pinimg.com/736x/b8/02/64/b80264c12c88eac19d5e4c8597d051e1.jpg');
background-attachment: fixed;
background-size: cover;
font-family: 'Roboto', sans-serif;
text-align: center;
color: white;
height: 100%;
text-shadow: black 0 0 4px;
}
p {
    height: 100%;
}
.container1 {
    position: absolute;
    height: 100%;
}
.container2 {
    width: 100%;
    background-image: url(http://ak7.picdn.net/shutterstock/videos/5200997/preview/stock-footage-blurred-background-of-moving-lights-from-a-road-of-traffic-at-night-time.jpg);
    background-attachment: fixed;
    background-size: cover;
    margin: 0;
    position: absolute;
    left: 0;
    height: 100%;
}
img {
    max-width: 15vw;
    height: auto;
}
.container1 img {
    position: absolute;
    top: 0;
    left: 0;
}
.container2 img{
    position: absolute;
    left: 0;
}
h1 {
    font-size: 15vw;
}
h2{
    font-size: 15vw;
}

Please ignore any compatability issues or wrong use of certain tags, im working on it.

Broken Result:

Im wanting the day part to be full height

Answer 1

Not only body, but html tag should be set to height: 100% as well. Percentage height property is calculated relative to the parent, and, as it turns out, body isn't the highest one, html is.