CSS双栏布局实现：左侧固定导航栏+右侧自适应内容栏（移动端切换顺序）

Hey there! Sounds like you're close to getting your layout right—let's iron out that content width issue and make the mobile switch work seamlessly. I'll share two reliable modern CSS approaches that'll solve this for you: Flexbox and CSS Grid. Both are way more robust than old float-based layouts.

Approach 1: Flexbox (Great for Simple Row/Column Layouts) #

Flexbox is perfect here because it handles space distribution and wrapping effortlessly. Here's how to set it up:

Step 1: HTML Structure #

Keep your markup clean—wrap your nav and content in a container div:

<div class="page-container">
  <nav class="sidebar-nav">
    <!-- Your nav links here -->
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Projects</li>
    </ul>
  </nav>
  <main class="content-area">
    <!-- Your page content here -->
    <h1>Welcome to the Content Area</h1>
    <p>This section will adapt to the remaining space on desktop, and drop below the nav on mobile.</p>
  </main>
</div>

Step 2: CSS Styling #

The key fixes here are using flex: 1 on the content area to make it fill remaining space, and flex-wrap: wrap on the container to let elements stack on mobile. We'll also add min-width: 0 to the content area to prevent it from overflowing and breaking the layout:

/* Base container styles */
.page-container {
  display: flex;
  flex-wrap: wrap; /* Allows wrapping on small screens */
  min-height: 100vh; /* Optional: makes container fill viewport height */
}

/* Fixed-width sidebar */
.sidebar-nav {
  width: 280px; /* Adjust this to your desired fixed width */
  background: #f0f0f0;
  padding: 20px;
}

/* Adaptive content area */
.content-area {
  flex: 1; /* Critical: tells the content to fill remaining space */
  min-width: 0; /* Prevents content from overflowing and pushing the nav off-screen */
  padding: 20px;
  background: #fff;
}

/* Mobile breakpoint (adjust the max-width to your needs) */
@media (max-width: 768px) {
  .sidebar-nav {
    width: 100%; /* Nav takes full width on mobile */
    order: 2; /* Puts nav below content (optional, if you want content first) */
  }
  .content-area {
    order: 1; /* Puts content above nav */
    width: 100%;
  }
}

Approach 2: CSS Grid (More Powerful for 2D Layouts) #

If you prefer Grid (it's fantastic for explicit column/row control), here's how to implement it:

CSS Styling #

Grid lets you define column sizes directly, and switching to mobile is just a matter of changing the column template:

.page-container {
  display: grid;
  grid-template-columns: 280px 1fr; /* Fixed nav width + adaptive content */
  min-height: 100vh;
}

.sidebar-nav {
  background: #f0f0f0;
  padding: 20px;
}

.content-area {
  padding: 20px;
  background: #fff;
}

/* Mobile breakpoint */
@media (max-width: 768px) {
  .page-container {
    grid-template-columns: 1fr; /* Single column on mobile */
  }
  .sidebar-nav {
    grid-row: 2; /* Moves nav to the second row (below content) */
  }
}

Common Issues That Might Be Breaking Your Layout #

If your content area wasn't adapting correctly before, it's likely one of these:

• You weren't using flex: 1 (Flexbox) or 1fr (Grid) to tell the content to fill remaining space
• Missing min-width: 0 on the content area (Flexbox) which can cause overflow to break the layout
• Using old float-based layouts without proper clearfixes, which leads to collapsing containers or misaligned elements

Both of these approaches will fix those problems and give you a responsive layout that works flawlessly on desktop and mobile.

内容的提问来源于stack exchange，提问作者Brandrally