diff --git a/docs/_layouts/tutorial_frame.html b/docs/_layouts/tutorial_frame.html
index 8928203f..27af2ddd 100644
--- a/docs/_layouts/tutorial_frame.html
+++ b/docs/_layouts/tutorial_frame.html
@@ -14,6 +14,9 @@
 
 {% unless page.customMapContainer == "true" %}
 	<style>
+		html, body {
+			height: 100%;
+		}
 		#map {
 			width: 600px;
 			height: 400px;
diff --git a/docs/examples/extending/class-diagram.md b/docs/examples/extending/class-diagram.md
index 25cacef4..3f9bf728 100644
--- a/docs/examples/extending/class-diagram.md
+++ b/docs/examples/extending/class-diagram.md
@@ -1,6 +1,14 @@
 ---
 layout: tutorial_frame
 title: Leaflet class diagram
+css: "body {
+            margin: 0;
+        }
+
+        #map {
+            width: 100vw;
+            height: 100%;
+        }"
 ---
 <script type='text/javascript'>
 
@@ -13,10 +21,6 @@ title: Leaflet class diagram
 		maxBounds: bounds
 	});
 
-	map.getContainer().style.width = '100vw';
-	map.getContainer().style.height= '100%';
-	document.body.style.margin = 0;
-
 	var image = L.imageOverlay('class-diagram.png', bounds).addTo(map);
 
 	map.fitBounds(bounds);
diff --git a/docs/examples/mobile/example.md b/docs/examples/mobile/example.md
index f6636b6a..90ef218f 100644
--- a/docs/examples/mobile/example.md
+++ b/docs/examples/mobile/example.md
@@ -5,7 +5,7 @@ css: "body {
 		padding: 0;
 		margin: 0;
 	}
-	html, body, #map {
+	#map {
 		height: 100%;
 		width: 100vw;
 	}"