Layout mit CSS allein

deutscher-pfadfinderbund · Jun 6, 2024 · b205ffe · b205ffe
1 parent 93b8dba
commit b205ffe
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 25 deletions.
diff --git a/assets/styles/utilities.css b/assets/styles/utilities.css
@@ -24,8 +24,19 @@ address {
     line-height: inherit;
 }
 
+body {
+    height: 100dvh; /* 100% der (dynamischen) Viewport Höhe */
+    display: grid;
+
+    /* 
+     zwei Zeilen.
+     Zeile 1: auto -> Der Inhalt entscheidet die Höhe.
+     Zeile 2: 1fr  -> 1 Anteil (FRaction) des restlichen Platzes. */
+    grid-template-rows: auto 1fr; 
+}
+
 #map {
-    height: calc(100vh - var(--nav-height));
+    height: 100%; /* Fülle deinen Container */
     transition: 0.1s;
 }
 
@@ -233,13 +244,10 @@ address {
 
 
 #branding {
-    height: 100%;
     display: flex;
     gap: 2rem;
     width: auto;
     align-items: center;
-
-
 }
 
 

diff --git a/index.html b/index.html
@@ -37,7 +37,7 @@
 </head>
 
 <body>
-    <nav id="mainnav" class="navbar">
+    <nav class="navbar">
         <img style="color-scheme: dark;" src="./assets/img/Bundeslilie_dynamic.svg">
         <h1 id="branding">
             Karte des DPBs
@@ -61,26 +61,6 @@ <h1 id="branding">
     <script src="https://unpkg.com/leaflet.markercluster.layersupport@2/dist/leaflet.markercluster.layersupport.js" crossorigin=""></script>
     <script src="https://unpkg.com/leaflet-search@4/dist/leaflet-search.min.js" crossorigin=""></script>
     <script src="https://cdn.jsdelivr.net/npm/@drustack/leaflet.resetview/dist/L.Control.ResetView.min.js"></script>
-
-    <script>
-
-        document.addEventListener("DOMContentLoaded", function() {
-            setnavheight();
-        });
-
-        window.addEventListener("resize", function() {
-            setnavheight();
-        });
-
-
-        function setnavheight() {
-            const navbar = document.getElementById("mainnav");
-            var r = document.querySelector(':root');
-            r.style.setProperty('--nav-height', navbar.offsetHeight + 'px');
-        }
-
-    </script>
-
 
     <script src="assets/js/map.js" type="module" ></script>