tut_spa: ensure whole page does not scroll

pthom · Dec 22, 2024 · e5f7c3a · e5f7c3a
1 parent 56e89d6
commit e5f7c3a
Showing 1 changed file with 16 additions and 13 deletions.
diff --git a/tutorial/single_page_book_app/resources_singlepage/style.css b/tutorial/single_page_book_app/resources_singlepage/style.css
@@ -1,37 +1,38 @@
 /* ==========================
    Global Styles
 ========================== */
-html, body {
+html,
+body {
     height: 100%;
     margin: 0;
     padding: 0;
-    overflow: hidden; /* Prevent overall page scrolling */
+    overflow: hidden; /* no page-level scrollbars */
 }
 
 body {
     display: flex;
     flex-direction: column;
     font-family: Arial, sans-serif;
-    font-size: 14px;
-    line-height: 1.6;
-    color: #333;
 }
 
 /* ==========================
    Header and Buttons
 ========================== */
 .main-header {
+    flex-shrink: 0; /* Ensure header doesn't shrink */
+    height: 3rem;
+    background-color: #f9f9f9;
+    border-bottom: 1px solid #ccc;
+    padding: 0.5rem 1rem;
+
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background-color: #f9f9f9;
     border-bottom: 1px solid #ccc;
-    padding: 0.5rem 1rem;
     position: sticky;
     top: 0;
     z-index: 1000;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    flex-shrink: 0; /* Ensure header doesn't shrink */
 }
 
 #toggle-sidebar {
@@ -67,20 +68,21 @@ body {
    Layout Container
 ========================== */
 .layout-container {
+    flex: 1;                     /* fill the rest of the window below the header */
     display: grid;
-    grid-template-columns: 200px auto 300px; /* Sidebar | Content | Canvas */
-    grid-template-areas: "sidebar content canvas";
+    grid-template-columns: 200px auto 300px; /* sidebar - content - breadcrumb */
+    grid-template-areas: "sidebar content aside";
     gap: 1rem;
-    height: calc(100% - 3rem); /* Remaining height after the header */
-    overflow: hidden; /* Prevent scrolling of the layout itself */
+    overflow: hidden;            /* no scrolling for the container itself */
+    /*height: calc(100% - 3rem); !* using flex:1 now *!*/
 }
 
 /* ==========================
    Sidebar
 ========================== */
 #toc-sidebar {
     grid-area: sidebar;
-    background-color: #fff;
+    background: white;
     border-right: 1px solid #ccc;
     padding: 1rem;
     overflow-y: auto; /* Sidebar scrolls independently */
@@ -158,6 +160,7 @@ body {
     padding: 1rem;
     height: 100%; /* Ensure it spans the full height of the container */
     box-sizing: border-box;
+    background-color: #f9f9f9;
 }
 
 #content-area {