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>
<html>
...
</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.
index.html

<!DOCTYPE html>
<html>
<head>
  <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>
</head>
<body>
  <div id="nav">
    <ul>
      <li><a href="#about">About</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
  <div id="container">
    <div id="page1" class="page">
      <h1><a name="about">about</a></h1>
      About page content goes here.
    </div>
    <div id="page2" class="page">
      <h1><a name="portfolio">portfolio</a></h1>
      Portfolio page content goes here.
    </div>
    <div id="page3" class="page">
      <h1><a name="contact">contact</a></h1>
      Contact page content goes here.
    </div>
  </div>
</body>
</html>

 

style.css

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

h1 { margin: 0px; }

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

 

script.js

$(function() {
  $("#container").snapscroll();
});

 

Done =)

Reference:

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s