Fix map styles in "Extending Leaflet" example (#5819)

* fix map height in extending example

* add html and body styles to tutorial_frame

* move js styles to css

* remove unnecessary styles from mobile/example.md

docs/_layouts/tutorial_frame.html

@@ -14,6 +14,9 @@
 
 {% unless page.customMapContainer == "true" %}
 	<style>
+		html, body {
+			height: 100%;
+		}
 		#map {
 			width: 600px;
 			height: 400px;

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);

docs/examples/mobile/example.md

@@ -5,7 +5,7 @@ css: "body {
 		padding: 0;
 		margin: 0;
 	}
-	html, body, #map {
+	#map {
 		height: 100%;
 		width: 100vw;
 	}"