使用CSS创建固定左侧容器实现垂直布局：技能列表与主内容区实践

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用CSS创建固定左侧容器实现垂直布局：技能列表与主内容区实践

2025-10-10

浏览次数：次

返回列表

使用CSS创建固定左侧容器实现垂直布局：技能列表与主内容区实践

本教程将详细指导如何利用CSS的position: fixed属性，在网页中创建一个垂直固定在左侧的容器，用于展示技能列表或导航，同时确保右侧主内容区域的正常布局。文章将提供HTML结构和CSS样式示例，并探讨关键布局技巧与注意事项，帮助开发者构建清晰、专业的网页界面。

1. 理解核心概念：CSS position 属性

在网页布局中，实现元素固定定位的关键在于css的position属性。

position: fixed：当一个元素被设置为position: fixed时，它会从正常的文档流中移除，并相对于浏览器视口（viewport）进行定位。这意味着无论用户如何滚动页面，该元素都会保持在屏幕上的固定位置。通过配合top、bottom、left、right属性，可以精确控制其在视口中的位置。
position: sticky：作为fixed的替代方案，position: sticky提供了一种“粘性”定位。元素在达到某个滚动阈值之前表现为相对定位，一旦滚动到设定的位置，它就会像fixed元素一样固定在那里。这在某些导航栏或侧边栏需要先随页面滚动，然后才固定时非常有用。对于本教程的需求（页面加载即固定），fixed是更直接的选择。

2. 构建基础HTML结构

为了实现左侧固定容器和右侧主内容区的布局，我们需要两个主要的div元素：一个用于固定侧边栏，另一个用于承载主内容。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简历页面布局</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <!-- 固定左侧容器：用于技能列表 -->
    <div class="fixed-sidebar">
        <h3>我的技能</h3>
        <ul>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>J*aScript (ES6+)</li>
            <li>React.js</li>
            <li>Node.js</li>
            <li>Git / GitHub</li>
            <li>Responsive Design</li>
        </ul>
        <!-- 更多技能... -->
    </div>

    <!-- 主内容区域：用于职业经历、教育背景等 -->
    <div class="main-content">
        <h1>我的个人简历</h1>
        <h2>职业经历</h2>
        <p><strong>公司A - 前端开发工程师</strong></p>
        <p>2025年3月 - 至今</p>
        <ul>
            <li>负责公司产品前端页面的开发与维护。</li>
            <li>参与新功能的需求分析、技术选型和架构设计。</li>
            <li>优化页面性能，提升用户体验。</li>
            <li>与后端团队紧密协作，完成项目交付。</li>
        </ul>

        <h2>教育背景</h2>
        <p><strong>大学B - 计算机科学与技术</strong></p>
        <p>2016年9月 - 2025年7月</p>
        <ul>
            <li>获得学士学位。</li>
            <li>主修数据结构、算法、操作系统等课程。</li>
        </ul>

        <h2>项目经验</h2>
        <p><strong>项目X - 在线商城系统</strong></p>
        <p>负责前端模块开发，使用React构建用户界面，实现商品展示、购物车、订单管理等功能。</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2356">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/176118961795973.png" alt="青泥AI">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2356">青泥AI</a>
                            <p>青泥学术AI写作辅助平台</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="青泥AI">
                                <span>360</span>
                            </div>
                        </div>
                        <a href="/ai/2356" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="青泥AI">
                        </a>
                    </div>
                

        <!-- 添加更多内容以演示页面滚动效果 -->
        <p>为了更好地展示页面滚动时固定侧边栏的效果，这里添加了更多占位文本。请注意观察左侧的技能列表，它将始终保持在屏幕的可见区域内，而右侧的主内容区域则可以自由滚动。</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Curabitur pretium tincidunt lacus. Nulla gr*ida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gr*ida. Duis ac tellus et risus auctor iaculis. Aenean placerat. In in enim a arcu ornare hendrerit. Sed sed lectus. Aliquam eleifend et, dapibus adipiscing, elit. Sed ut dolor. Ut ac est. Integer ac sapien. In in enim a arcu ornare hendrerit. Sed sed lectus. Aliquam eleifend et, dapibus adipiscing, elit. Sed ut dolor. Ut ac est. Integer ac sapien.</p>
        <p>Proin ut quam non est volutpat mollis. Sed ut dolor. Ut ac est. Integer ac sapien. In in enim a arcu ornare hendrerit. Sed sed lectus. Aliquam eleifend et, dapibus adipiscing, elit. Sed ut dolor. Ut ac est. Integer ac sapien. In in enim a arcu ornare hendrerit. Sed sed lectus. Aliquam eleifend et, dapibus adipiscing, elit. Sed ut dolor. Ut ac est. Integer ac sapien.</p>
    </div>

</body>
</html>

3. 应用CSS样式实现布局

接下来，我们将创建styles.css文件，并为上述HTML结构添加样式，实现固定左侧容器和主内容区的布局。

/* styles.css */

/* 重置默认浏览器样式 */
body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    line-height: 1.6;
}

/* 固定左侧容器样式 */
.fixed-sidebar {
    position: fixed; /* 关键：使元素固定在视口中 */
    top: 0;          /* 距离视口顶部0距离 */
    left: 0;         /* 距离视口左侧0距离 */
    width: 220px;    /* 设置侧边栏宽度 */
    height: 100vh;   /* 设置侧边栏高度为视口高度 */
    background-color: #f8f8f8; /* 侧边栏背景色 */
    padding: 20px;   /* 内边距 */
    box-shadow: 2px 0 8px rgba(0,0,0,0.1); /* 阴影效果 */
    overflow-y: auto; /* 如果内容溢出，允许垂直滚动 */
    box-sizing: border-box; /* 确保padding包含在width内 */
    z-index: 100; /* 确保侧边栏在其他内容之上 */
}

.fixed-sidebar h3 {
    margin-top: 0;
    color: #0056b3;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.fixed-sidebar ul {
    list-style: none; /* 移除列表默认样式 */
    padding: 0;
    margin: 0;
}

.fixed-sidebar li {
    margin-bottom: 10px;
    padding: 5px 0;
    color: #555;
    font-size: 0.95em;
}

/* 主内容区域样式 */
.main-content {
    /* 关键：为主要内容区域设置左外边距，以避免被固定侧边栏覆盖 */
    margin-left: 220px; /* 必须与.fixed-sidebar的宽度相同 */
    padding: 30px; /* 内边距 */
    max-width: 800px; /* 限制主内容最大宽度，提高可读性 */
    margin-right: auto; /* 配合max-width实现居中 */
    margin-left: 250px; /* 调整以适配侧边栏宽度+padding */
}

.main-content h1, .main-content h2 {
    color: #222;
    margin-top: 40px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.main-content h1 {
    font-size: 2.5em;
}

.main-content h2 {
    font-size: 1.8em;
    color: #0056b3;
}

.main-content p {
    margin-bottom: 1em;
}

.main-content ul {
    margin-left: 20px;
    list-style: disc;
}

.main-content li {
    margin-bottom: 0.5em;
}

/* 媒体查询：适应小屏幕设备 */
@media (max-width: 768px) {
    .fixed-sidebar {
        position: relative; /* 在小屏幕上改为相对定位 */
        width: 100%;       /* 占据全部宽度 */
        height: auto;      /* 高度自适应内容 */
        box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 调整阴影 */
        padding: 15px;
    }

    .main-content {
        margin-left: 0;    /* 移除左外边距 */
        padding: 20px;
        max-width: none;   /* 移除最大宽度限制 */
    }

    .fixed-sidebar h3 {
        text-align: center;
        margin-bottom: 10px;
    }

    .fixed-sidebar ul {
        display: flex; /* 技能列表横向排列 */
        flex-wrap: wrap;
        justify-content: center;
    }

    .fixed-sidebar li {
        margin: 5px 10px;
        border: 1px solid #ddd;
        padding: 5px 10px;
        border-radius: 5px;
        background-color: #fff;
    }
}

4. 注意事项与最佳实践

margin-left 的重要性：当使用position: fixed将侧边栏固定后，它会脱离文档流。这意味着主内容区域会向上移动，可能会被侧边栏覆盖。为了避免这种情况，必须给主内容区域设置一个左外边距（margin-left），其值应等于或略大于固定侧边栏的宽度。
初学者建议：先掌握原生CSS：对于刚接触Web开发的初学者，建议优先学习和掌握原生HTML、CSS和J*aScript。过早依赖Bootstrap、Tailwind CSS等CSS框架可能会让你在不理解底层原理的情况下，难以调试和自定义样式。理解position、display、flexbox、grid等核心概念是构建复杂布局的基础。
响应式设计：固定侧边栏在桌面端表现良好，但在移动设备上可能会占据过多屏幕空间或导致布局混乱。因此，强烈建议使用CSS媒体查询（@media规则）来调整布局。例如，在小屏幕上可以将固定侧边栏改为堆叠在主内容上方，或通过点击按钮显示/隐藏。示例代码中已包含一个简单的响应式处理。
z-index 的使用：如果页面中有其他元素可能与固定侧边栏重叠，可以使用z-index属性来控制它们的堆叠顺序。给侧边栏设置一个较高的z-index值（例如z-index: 100），可以确保它始终显示在其他内容之上。
滚动行为： position: fixed的元素不会随页面滚动，但其自身如果内容溢出（如技能列表过长），可以通过overflow-y: auto使其内部滚动。