要素のフルスクリーン表示をCSSとJavaScriptそれぞれで実装。 元になるHTMLは以下を使用。

<body>
	<section class="full1">
		<p>Page1</p>
	</section>
	<section class="full2">
		<p>Page2</p>
	</section>
	<section class="full3">
		<p>Page3</p>
	</section>
</body>

CSSその1

よく見かけるposition:absoluteとheight:100%の組み合わせ。 複数の要素をフルスクリーン表示させる場合少し面倒くさいか。

body {
  margin: 0;
  padding: 0;
}
p {
  text-align: center;
  color: white;
  font-size: 2em;
  margin-top: 0;
}
.full1, .full2, .full3 {
  position: absolute;
  height: 100%;
  width: 100%;
  display: block;
}
.full1 {
  background-color: teal;
  top: 0;

}
.full2 {
  background-color: blue;
  top: 100%;
}
.full3 {
  background-color: black;
  top: 200%;
}

See the Pen Full Screen: CSS1 by Kei (@kay8) on CodePen.

CSSその2

height: 100vhを使った方法。vhはviewport heightの略でビューポートに対する割合を指定可能。上から10%の場合はheight: 10vh。

		body {
			margin: 0;
			padding: 0;
		}
		p {
			text-align: center;
			color: white;
			font-size: 2em;
			margin-top: 0;
		}
		.full1, .full2, .full3 {
			height: 100vh;
			width: 100%;
			display: block;
		}
		.full1 {
			background-color: teal;

		}
		.full2 {
			background-color: blue;
		}
		.full3 {
			background-color: black;
		}

See the Pen Full Screen: CSS2 by Kei (@kay8) on CodePen.

%による指定との大きな違いは

% の場合は対象となる要素のプロパティが親要素のそれと紐付けられるため、必ずしもビューポートの幅が基準になるとは限りません。(中略)vw, vh にはそのようなプロパティの紐付けがありません。(CSS には vw, vh, vmin, vmax という単位がある ｜ Developers.IO )

現時点(2015/1/19)でAndroid Brower4.4以降にしか対応していないこと、モバイル版Safariでバグが多いことを考えると使うかどうかは微妙なところ(どちらもそこまでユーザは多くないですが)。

JavaScript

こちらはgetElementsByTagNameで取得したNodeListの要素へstyle属性を設定するもの。単に要素のリストがほしいだけなのでgetElementsByTagNameを使用。(参考: getElementsByTagName()がquerySelectorAll()より高速な理由)

		window.addEventListener('load', setGreetHeight, false);
		window.addEventListener('resize', setGreetHeight, false);
		var w = window.innerWidth;

		function setGreetHeight() {
		  var h = window.innerHeight;
		  var sec = document.getElementsByTagName('section');
		  console.log(sec);
		  for (var i = 0; i < sec.length; i++) {
		  	sec[i].style.height = h + "px";
		  }
		}

See the Pen Full Screen: JavaScript by Kei (@kay8) on CodePen.

getElementsByClassName()かgetElementByIdを使った方がパフォーマンスが良いみたいですが (参考)。indexされている分、TagNameよりも速いんですかね？(この辺りの理由はよく分からず…)

その他

モバイルでランドスケープ表示にした際、viewport外にある要素が表示されないサイトをたまに見かけるので必要に応じてmin-heightの設定を。