fix: resolve layout issues with CSS and HTML structure

loveTsong · loveTsong · commit 39081520d276 · 2026-04-01T15:18:34.000+08:00
Major layout fixes:
- Replace conflicting .wrapper class with .container
- Fix flexbox layout to prevent footer overlap
- Ensure proper sticky positioning for sidebar
- Add margin-top: auto to footer for proper placement
- Clean up CSS structure for better maintainability

Files changed:
- assets/css/style.css: Complete rewrite with fixed layout
- _layouts/default.html: Change wrapper to container class
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -11,17 +11,17 @@
 </head>
 <body>
   <header class="site-header">
-    <div class="wrapper">
+    <div class="container">
       <a class="site-title" href="{{ '/' | relative_url }}">{{ site.title }}</a>
       <nav class="site-nav">
         <a href="{{ '/docs/zh_CN/' | relative_url }}" class="nav-link">中文</a>
         <a href="{{ '/docs/en_US/' | relative_url }}" class="nav-link">English</a>
       </nav>
     </div>
   </header>
-  
+
   <main class="page-content">
-    <div class="wrapper">
+    <div class="container">
       <div class="sidebar">
         {% include sidebar.html %}
       </div>
@@ -35,9 +35,9 @@
       </article>
     </div>
   </main>
-  
+
   <footer class="site-footer">
-    <div class="wrapper">
+    <div class="container">
       <p>&copy; {{ site.time | date: '%Y' }} ModelEngine-Group. All rights reserved.</p>
     </div>
   </footer>
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -18,14 +18,12 @@ body {
   flex-direction: column;
 }
 
-.wrapper {
+/* Container for header and footer */
+.container {
   max-width: 1200px;
   width: 100%;
   margin: 0 auto;
   padding: 0 16px;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
 }
 
 .site-header {
@@ -35,6 +33,12 @@ body {
   flex-shrink: 0;
 }
 
+.site-header .container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
 .site-title {
   color: #fff;
   font-size: 1.5rem;
@@ -43,13 +47,13 @@ body {
 }
 
 .site-nav {
-  float: right;
+  display: flex;
+  gap: 16px;
 }
 
 .nav-link {
   color: rgba(255,255,255,0.7);
   text-decoration: none;
-  margin-left: 16px;
   padding: 4px 8px;
   border-radius: 4px;
 }
@@ -60,12 +64,11 @@ body {
 }
 
 .page-content {
-  padding: 32px 0;
   flex: 1;
-  min-height: calc(100vh - 200px);
+  padding: 32px 0;
 }
 
-.page-content .wrapper {
+.page-content .container {
   display: flex;
   gap: 32px;
   align-items: flex-start;
@@ -169,6 +172,7 @@ body {
   padding: 24px 0;
   text-align: center;
   flex-shrink: 0;
+  margin-top: auto;
 }
 
 .site-footer p {
@@ -203,11 +207,13 @@ body {
 }
 
 @media (max-width: 768px) {
-  .page-content .wrapper {
+  .page-content .container {
     flex-direction: column;
   }
-  
+
   .sidebar {
     width: 100%;
+    position: static;
+    max-height: none;
   }
 }
