我有一个HTML页面，其HTML和body元素的高度为100％。 html和正文仍然没有覆盖整个屏幕（即当我通过调试器检查高度时，HTML和body元素的大小约为400px）。
体内包含的元素有更大的高度（有一个远大于400像素的图像）。因此，出现了身体高度的滚动。为什么html和body元素不能覆盖整个屏幕？有什么想法吗？
<!DOCTYPE HTML>
<html style="height:100%;">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vastre</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link href="lightbox/css/lightbox.css" rel="stylesheet" />
<!-- <link href='http://fonts.googleapis.com/css?family=Open+Sans|Baumans' rel='stylesheet' type='text/css'>-->
<script src="js/vendor/modernizr.min.js"></script>
<script src="js/vendor/respond.min.js"></script>
<!-- include extern jQuery file but fall back to local file if extern one fails to load !-->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script type="text/javascript" src="js\/vendor\/1.7.2.jquery.min"><\/script>')</script>
<script src="lightbox/js/lightbox.js"></script>
<script src="js/vendor/prefixfree.min.js"></script>
<script src="js/script.js"></script>
<!--[if lt IE 9]>
<style>
header
{
margin: 0 auto 20px auto;
}
#four_columns .img-item figure span.thumb-screen
{
display:none;
}
</style>
<![endif]-->
<style type="text/css">
#emailText {
transition: transform 0.3s ease-in;
}
.trans {
transform: scaleX(1.2);
}
.zap {
background: blue !important;
}
</style>
</head>
<body style="height:100%;">
<div id="example-wrapper" style="overflow:scroll;height:100%">
<header>
<div class="toggleMobile">
<span class="menu1"></span>
<span class="menu2"></span>
<span class="menu3"></span>
</div>
<div id="mobileMenu">
<ul>
<li><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">About</a></li>
</ul>
</div>
<img src="images/vastre_logo.png" alt="Vastre" title="Vastre" />
<nav>
<h2 class="hidden">Our navigation</h2>
<ul>
<li><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">Porfolio</a></li>
<li><a href="javascript:void(0)">About</a></li>
<li><a href="javascript:void(0)">Contact</a></li>
</ul>
</nav>
</header>
<div class="container1">
<div id="slides1">
<img src="images/v1_png1.png" alt="Some alt text" style="max-width: 100%; height: auto">
</div>
</div>
<section id="spacer">
<div id="trigger1"></div>
<h2 class="hidden">Dolor sit amet</h2>
<p id="emailText">We will launch soon! Meanwhile stay in trend! Subscribe</p>
<div class="search">
<form action="#">
<input type="text" name="sitesearch" value="Enter your e-mail..." />
<input id="animate2" type="submit" name="start_search" class="button" value="Submit" />
</form>
</div>
<script>
// init controller
var controller = new ScrollMagic.Controller({ container: "#example-wrapper" });
// build scene
var scene = new ScrollMagic.Scene({ triggerElement: "#trigger1" })
// trigger animation by adding a css class
.setClassToggle("#animate2", "zap")
.addTo(controller);
var scene2 = new ScrollMagic.Scene({ triggerElement: "#trigger1" })
// trigger animation by adding a css class
.setClassToggle("#emailText", "trans")
.addTo(controller);
</script>
</section>
<section id="boxcontent">
<h2 class="hidden">Adipiscing</h2>
<article>
<img src="img/icon1.png" alt="Some alt text" />
<h3>Lorem ipsum</h3>
<p>
Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen.
</p>
</article>
<article>
<img src="img/icon2.png" alt="Some alt text" />
<h3>Consectetuer</h3>
<p>
Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen...
</p>
</article>
<article>
<img src="img/icon3.png" alt="Some alt text" />
<h3>Dolor sit amet</h3>
<p>
Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg.
</p>
</article>
<br class="clear" />
</section>
<section id="four_columns">
<h2>Lorem ipsum
</h2>
<article class="img-item">
<h3 class="hidden">Dolor sit amet</h3>
<figure>
<a href="img/example-slide-1.jpg" rel="lightbox" title="Some title">
<span class="thumb-screen"></span>
<img src="img/example-slide-1sml.jpg" alt="Some alt text" />
</a>
<figcaption>
<strong>Photo by: Some name
</strong>
Als es die ersten Hügel des Kursivgebirges erklommen hatte
</figcaption>
</figure>
</article>
<article class="img-item">
<h3 class="hidden">Sit Amet</h3>
<figure>
<a href="img/example-slide-2.jpg" rel="lightbox" title="Some title">
<span class="thumb-screen"></span>
<img src="img/example-slide-2sml.jpg" alt="Some alt text" />
</a>
<figcaption>
<strong>Photo by: Some name
</strong>
warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen
</figcaption>
</figure>
</article>
<article class="img-item">
<h3 class="hidden">Dolor Sit</h3>
<figure>
<a href="img/example-slide-3.jpg" rel="lightbox" title="Some title">
<span class="thumb-screen"></span>
<img src="img/example-slide-3sml.jpg" alt="Some alt text" />
</a>
<figcaption>
<strong>Photo by: Some name
</strong>
die Headline von Alphabetdorf und die Subline seiner eigenen Straße.
</figcaption>
</figure>
</article>
<article class="img-item">
<h3 class="hidden">Lorem Ipsum</h3>
<figure>
<a href="img/example-slide-4.jpg" rel="lightbox" title="Some title">
<span class="thumb-screen"></span>
<img src="img/example-slide-4sml.jpg" alt="Some alt text" />
</a>
<figcaption>
<strong>Photo by: Some name
</strong>
Wehmütig lief ihm eine rhetorische Frage über die Wange.
</figcaption>
</figure>
</article>
<br class="clear" />
</section>
<section id="text_columns">
<h2 class="hidden">Blindtext</h2>
<article class="column1">
<h3>Dolor sit amet</h3>
<p>Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.</p>
<p>Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten.</p>
</article>
<section class="column2">
<h3 class="hidden">Lorem Impsum</h3>
<article class="row">
<h4 class="hidden">Dolor sit</h4>
<img src="img/icon4.png" width="80" class="rocket" alt="Some alt text" />
<p>Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch.</p>
</article>
<article class="row">
<h4 class="hidden">Ipsum</h4>
<img src="img/icon5.png" width="80" class="clock" alt="Some alt text" />
<p>Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange.</p>
</article>
</section>
</section>
<footer>
<h2 class="hidden">Our footer</h2>
<section id="copyright">
<h3 class="hidden">Copyright notice</h3>
<div class="wrapper">
<div class="social">
<a href="javascript:void(0)">
<img src="img/icon6.png" alt="Some alt text" width="25" /></a>
<a href="javascript:void(0)">
<img src="img/icon7.png" alt="Some alt text" width="25" /></a>
<a href="javascript:void(0)">
<img src="img/icon8.png" alt="Some alt text" width="25" /></a>
<a href="javascript:void(0)">
<img src="img/icon9.png" alt="Some alt text" width="25" /></a>
<a href="javascript:void(0)">
<img src="img/icon10.png" alt="Some alt text" width="25" /></a>
</div>
© Copyright 2014 by <a href="http://www.example.com">Example</a>. All Rights Reserved.
</div>
</section>
<section class="wrapper">
<h3 class="hidden">Footer content</h3>
<article class="column">
<h4>Lorem ipsum</h4>
Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein.
</article>
<article class="column midlist">
<h4>Consectetuer</h4>
<ul>
<li><a href="javascript:void(0)">Die Copy warnte das Blindtextchen</a></li>
<li><a href="javascript:void(0)">Unterwegs traf es eine Copy</a></li>
<li><a href="javascript:void(0)">Doch alles Gutzureden konnte</a></li>
<li><a href="javascript:void(0)">Als es die ersten Hügel</a></li>
</ul>
</article>
<article class="column rightlist">
<h4>Dolor sit amet</h4>
<ul>
<li><a href="javascript:void(0)">
<img src="img/example-slide-1sml.jpg" width="80" alt="Some alt text" /><span>Unterwegs traf es eine Copy. Die Copy warnte.</span></a></li>
<li><a href="javascript:void(0)">
<img src="img/example-slide-2sml.jpg" width="80" alt="Some alt text" /><span>Doch alles Gutzureden konnte es nicht.</span></a></li>
<li><a href="javascript:void(0)">
<img src="img/example-slide-3sml.jpg" width="80" alt="Some alt text" /><span>Und es dann in ihre Agentur schleppten.</span></a></li>
</ul>
<br class="clear" />
</article>
</section>
</footer>
</div>
</body>
</html>