Mobile website doesn't display full page height

I'm testing responsive websites, and it works fine with desktop. But, when I test the website on mobile, the entire height of the website doesn't show on mobile. I have to scroll on mobile to see the entire height content of the website.

This is what it looks like http://prntscr.com/od8v9d . But on mobile google chrome it looks like this http://prntscr.com/od8w3d ,and I have to scroll down to see this http://prntscr.com/od8wu6 .

I've been using percentages for positioning and vh for height positioning.

#card{
    position:absolute;
    height:100vh;
    margin:0;
    width: 30.6%;

}
#card2{
    position:absolute;
    height:95vh;
    min-height: 95vh;
    margin:0;
    width: 69.4%;
    right: 0;

}

Thank you for any suggestions :)