100% height does not work for HTML5 Doctype

Recently doing some proof of concept on using jQuery SnapScroll. The demo worked without any problem but when i implemented it, i couldn’t make my div taking 100% height of the view port. Finally i figured out that the failure was caused by the HTML5 Doctype declaration on the index.html.

<!DOCTYPE html>


The demo worked because it doesn’t have any Doctype declaration. Here is a working example to make jQuery SnapScroll work with HTML5 Doctype.

<!DOCTYPE html>
  <title>Vertical Scrolling Demo</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://cdn.jsdelivr.net/jquery.snapscroll/0.1/dependencies/jquery.scroll_to.js"></script>
  <script src="http://cdn.jsdelivr.net/jquery.snapscroll/0.1/jquery.snapscroll.js"></script>
  <script type="text/javascript" src="js/script.js"></script>
  <link rel="stylesheet" type="text/css" href="css/style.css"></script>
  <div id="nav">
      <li><a href="#about">About</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#contact">Contact</a></li>
  <div id="container">
    <div id="page1" class="page">
      <h1><a name="about">about</a></h1>
      About page content goes here.
    <div id="page2" class="page">
      <h1><a name="portfolio">portfolio</a></h1>
      Portfolio page content goes here.
    <div id="page3" class="page">
      <h1><a name="contact">contact</a></h1>
      Contact page content goes here.



html, body, #container {
  width: 100%;
  height: 100%;
  background: white;
.page {
  min-height: 100%;
  width: 100%;

h1 { margin: 0px; }

#page1 { background-color: red; }
#page2 { background-color: green; }
#page3 { background-color: blue; }



$(function() {


Done =)



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.