核心概念

无论使用哪种方法,核心思想都是：

css左侧固定右侧自适应模板下载
（图片来源网络，侵删）
  1. 左侧固定：给左侧栏设置一个固定的 width（250px）。
  2. 右侧自适应：让右侧内容区域占据剩余的所有空间，这通常通过以下几种方式实现：
    • 使用 flex 布局的 flex: 1。
    • 使用 calc() 函数计算宽度：width: calc(100% - 250px)。
    • 使用 CSS Grid 布局。

Flexbox 布局 (推荐)

这是目前最现代、最简单、最推荐的方法，代码简洁，兼容性好,并且处理高度非常方便。

特点

  • 简单直观：代码量少,语义清晰。
  • 完美居中：天然支持垂直和水平居中。
  • 处理高度：子元素默认可以拉伸以填充父容器的高度。

在线预览 & 代码下载

您可以直接访问下方链接查看效果并下载代码： 🔗 点击下载 Flexbox 布局模板 (ZIP)

或者查看在线演示：👁️ 在线预览 (Flexbox)

核心代码

HTML (index.html)

css左侧固定右侧自适应模板下载
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Flexbox 左侧固定右侧自适应</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <!-- 左侧固定栏 -->
        <aside class="sidebar">
            <h2>侧边栏</h2>
            <p>这里是固定宽度的侧边栏内容。</p>
        </aside>
        <!-- 右侧自适应内容区 -->
        <main class="content">
            <h1>主内容区</h1>
            <p>这个区域会自适应宽度，填充剩余空间。</p>
            <!-- 可以添加更多内容 -->
        </main>
    </div>
</body>
</html>

CSS (style.css)

/* 重置默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #333;
}
/* 使用 Flexbox 布局 */
.container {
    display: flex; /* 1. 将容器设置为弹性盒子 */
    min-height: 100vh; /* 让容器至少占满整个视口高度 */
}
.sidebar {
    width: 250px;     /* 2. 左侧栏固定宽度 */
    background-color: #f0f0f0;
    padding: 20px;
    border-right: 1px solid #ddd;
}
.content {
    flex: 1;          /* 3. 核心魔法！flex: 1 让这个项目占据所有剩余空间 */
    padding: 20px;
    background-color: #fff;
    overflow: auto;   /* 如果内容过长，可以滚动 */
}

CSS Grid 布局

Flexbox 适合一维布局（行或列），而 CSS Grid 天生适合二维布局，对于这种经典的两列布局，Grid 同样非常强大。

特点

  • 二维布局：可以同时控制行和列。
  • 代码简洁：与 Flexbox 类似,代码也很清晰。
  • 强大的对齐：提供了更强大的对齐方式。

在线预览 & 代码下载

🔗 点击下载 CSS Grid 布局模板 (ZIP)

或者查看在线演示：👁️ 在线预览 (Grid)

css左侧固定右侧自适应模板下载
（图片来源网络，侵删）

核心代码

HTML (index.html)

<!-- HTML 结构与 Flexbox 方案完全相同 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">CSS Grid 左侧固定右侧自适应</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <aside class="sidebar">
            <h2>侧边栏</h2>
            <p>这里是固定宽度的侧边栏内容。</p>
        </aside>
        <main class="content">
            <h1>主内容区</h1>
            <p>这个区域会自适应宽度，填充剩余空间。</p>
        </main>
    </div>
</body>
</html>

CSS (style.css)

/* 重置默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #333;
}
/* 使用 Grid 布局 */
.container {
    display: grid; /* 1. 将容器设置为网格布局 */
    /* 2. 定义列：第一列固定 250px，第二列 1fr (剩余空间) */
    grid-template-columns: 250px 1fr; 
    min-height: 100vh;
}
.sidebar {
    background-color: #f0f0f0;
    padding: 20px;
    border-right: 1px solid #ddd;
}
.content {
    padding: 20px;
    background-color: #fff;
    overflow: auto;
}

浮动 + calc() (传统方法)

这是在 Flexbox 和 Grid 流行之前最常用的方法，现在不推荐在新项目中使用,但了解它有助于维护旧代码。

特点

  • 兼容性极好：支持所有浏览器,包括非常古老的版本。
  • 需要额外处理：需要清除浮动，否则父容器会“坍塌”。

在线预览 & 代码下载

🔗 点击下载 浮动布局模板 (ZIP)

或者查看在线演示：👁️ 在线预览 (浮动)

核心代码

HTML (index.html)

<!-- HTML 结构相同 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">浮动 左侧固定右侧自适应</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <aside class="sidebar">
            <h2>侧边栏</h2>
            <p>这里是固定宽度的侧边栏内容。</p>
        </aside>
        <main class="content">
            <h1>主内容区</h1>
            <p>这个区域会自适应宽度，填充剩余空间。</p>
        </main>
    </div>
</body>
</html>

CSS (style.css)

/* 重置默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #333;
}
.container {
    /* 给父容器设置一个 overflow: hidden 或 clear: both 来清除浮动 */
    overflow: hidden; 
}
.sidebar {
    width: 250px;
    float: left; /* 1. 让左侧栏浮动 */
    background-color: #f0f0f0;
    padding: 20px;
    border-right: 1px solid #ddd;
}
.content {
    /* 2. 使用 calc() 计算宽度，减去侧边栏的宽度 */
    width: calc(100% - 250px); 
    float: left; /* 也需要浮动 */
    padding: 20px;
    background-color: #fff;
    overflow: auto;
}

总结与建议

方法 优点 缺点 推荐度
Flexbox 代码简洁、直观、处理高度方便、现代标准 对于复杂二维布局可能不如Grid直观 ⭐⭐⭐⭐⭐ (首选)
CSS Grid 代码简洁、强大的二维布局能力 对于简单一维布局，功能稍显“过剩” ⭐⭐⭐⭐⭐ (备选，同样优秀)
浮动+calc 兼容性极好 需要手动清除浮动，代码稍显繁琐，不够现代 ⭐⭐ (仅用于维护旧项目)

对于新项目，强烈推荐使用 Flexbox 或 CSS Grid 布局，它们是现代前端开发的基石，能让你的代码更简洁、更易于维护。

  • 如果你只关心左右布局，并且可能涉及到垂直方向的对齐，选择 Flexbox。
  • 如果你的布局更复杂，或者未来可能扩展为多行多列，选择 CSS Grid。

您可以直接下载上面提供的 ZIP 文件，它们包含了完整的、可以直接运行的示例。