CSS实现固定左侧容器布局：构建可滚动技能列表的教程-html教程-PHP中文网

CSS实现固定左侧容器布局：构建可滚动技能列表的教程

花韻仙語

发布： 2025-10-12 12:15:23

原创

876人浏览过

CSS实现固定左侧容器布局：构建可滚动技能列表的教程

本教程详细介绍了如何使用CSS的position: fixed属性创建网页中固定的左侧容器，常用于展示技能列表或导航菜单。文章将指导您完成HTML结构搭建和CSS样式定义，确保左侧容器垂直固定且不影响右侧主要内容区域的布局。此外，还将探讨position: sticky的替代方案，并提供Web开发新手的学习建议。

引言

在现代网页设计中，固定侧边栏是一种常见的布局模式，它允许特定内容（如导航菜单、技能列表、广告或社交媒体按钮）在用户滚动页面时始终保持可见。这种设计能够提升用户体验，确保关键信息随时可达。本教程将专注于如何利用css创建一个固定在页面左侧、垂直延伸的容器，同时在右侧留出空间展示主要内容。

核心概念：position: fixed

实现固定定位的关键CSS属性是position: fixed。当一个元素被设置为position: fixed时，它会脱离正常的文档流，并相对于浏览器视口进行定位。这意味着无论用户如何滚动页面，该元素都会保持在屏幕上的固定位置。

position: fixed配合top, right, bottom, left这四个属性来精确控制元素的位置。例如，要将元素固定在左上角，可以设置top: 0; left: 0;。

实现步骤与示例

我们将创建一个包含一个固定左侧容器和一个主内容区域的简单布局。

1. HTML 结构

首先，定义基本的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">
        <h2>我的技能</h2>
        <ul>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JavaScript</li>
            <li>React</li>
            <li>Node.js</li>
            <li>Python</li>
        </ul>
    </div>

    <div class="main-content">
        <h1>个人简历</h1>
        <p>欢迎来到我的简历页面。以下是我的工作经历和项目经验。</p>
        <div class="section">
            <h3>工作经历</h3>
            <p><strong>公司A</strong> - 软件工程师 (2020 - 至今)</p>
            <ul>
                <li>负责前端界面开发与维护。</li>
                <li>参与后端API设计与实现。</li>
                <li>优化系统性能，提升用户体验。</li>
            </ul>
            <p>（此处可填充更多工作经历，以模拟页面滚动）</p>
            <p>...</p>
            <p>（此处可填充更多工作经历，以模拟页面滚动）</p>
            <p>...</p>
            <p>（此处可填充更多工作经历，以模拟页面滚动）</p>
            <p>...</p>
            <p>（此处可填充更多工作经历，以模拟页面滚动）</p>
            <p>...</p>
            <p>（此处可填充更多工作经历，以模拟页面滚动）</p>
            <p>...</p>
            <p>（此处可填充更多工作经历，以模拟页面滚动）</p>
            <p>...</p>
            <p>（此处可填充更多工作经历，以模拟页面滚动）</p>
            <p>...</p>
        </div>
        <div class="section">
            <h3>项目经验</h3>
            <p><strong>项目X</strong> - 在线商城系统</p>
            <ul>
                <li>负责用户注册、登录模块。</li>
                <li>实现商品展示、购物车功能。</li>
            </ul>
        </div>
    </div>

</body>
</html>

登录后复制

2. CSS 样式定义

接下来，在styles.css文件中定义样式。我们将为固定侧边栏设置position: fixed以及其宽度、背景色和定位。同时，为了避免主内容被侧边栏遮挡，需要为主内容区域设置左外边距。

body {
    margin: 0; /* 移除默认的body外边距 */
    font-family: Arial, sans-serif;
    display: flex; /* 使用Flexbox辅助布局，但fixed元素会脱离 */
}

.fixed-sidebar {
    position: fixed; /* 关键属性：固定定位 */
    top: 0;          /* 距离视口顶部0 */
    left: 0;         /* 距离视口左侧0 */
    width: 200px;    /* 侧边栏宽度 */
    height: 100vh;   /* 侧边栏高度占满整个视口 */
    background-color: #333; /* 背景色 */
    color: white;    /* 文字颜色 */
    padding: 20px;   /* 内边距 */
    box-sizing: border-box; /* 边框盒模型，使padding包含在width内 */
    overflow-y: auto; /* 如果内容过多，允许垂直滚动 */
}

.fixed-sidebar h2 {
    margin-top: 0;
    color: #00bcd4;
}

.fixed-sidebar ul {
    list-style: none;
    padding: 0;
}

.fixed-sidebar li {
    padding: 8px 0;
    border-bottom: 1px solid #555;
}

.fixed-sidebar li:last-child {
    border-bottom: none;
}

.main-content {
    margin-left: 200px; /* 留出与侧边栏宽度相同的左边距 */
    padding: 20px;      /* 主内容区域内边距 */
    flex-grow: 1;       /* 占据剩余空间 (当body使用flex时) */
}

.main-content h1 {
    color: #333;
}

.section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.section h3 {
    color: #007bff;
}

登录后复制

代码解释：

.fixed-sidebar：
- position: fixed;：将元素固定在视口中。
- top: 0; left: 0;：将其定位在视口左上角。
- width: 200px;：设定固定宽度。
- height: 100vh;：使其高度占满整个视口（vh是视口高度的百分比单位）。
- overflow-y: auto;：如果技能列表过长，允许侧边栏内部滚动，而不是整个页面滚动。
.main-content：
- margin-left: 200px;：这是至关重要的一步。由于固定定位的元素脱离了文档流，它不会占据空间。因此，主内容区域需要手动向右偏移，以避免被固定侧边栏遮挡。偏移量应等于侧边栏的宽度。

注意事项与最佳实践

内容遮挡问题：如上所述，position: fixed元素会脱离文档流，不占据任何空间。因此，其下方的元素（在我们的例子中是.main-content）需要通过设置margin或padding来避免被遮挡。
position: sticky 替代方案：
- 如果您希望侧边栏只在其父容器内滚动到某个位置后才固定，而不是一开始就固定，那么position: sticky可能是更好的选择。
- position: sticky结合top, right, bottom, left属性，当元素到达指定偏移量时，它会像fixed一样固定，否则表现为relative。
- 示例：position: sticky; top: 0; 会让元素在滚动到视口顶部时固定。
响应式设计：
- 固定侧边栏在桌面端效果良好，但在移动设备上可能会占用过多屏幕空间。
- 您应该使用媒体查询（@media）来调整固定侧边栏的样式，例如在小屏幕上将其隐藏、转换为顶部导航栏或底部导航栏。
可访问性：确保固定元素不会干扰屏幕阅读器或其他辅助技术。
新手学习建议：
- 对于Web开发新手，强烈建议在深入使用Bootstrap等CSS框架之前，先掌握HTML和纯CSS的基础知识。理解position、display、box-model等核心概念，能帮助您更好地利用框架，并在遇到问题时能独立调试。
- 通过实际练习和构建小型项目来巩固所学知识。

总结

通过本教程，您应该已经掌握了如何利用CSS的position: fixed属性创建固定在页面左侧的容器，并妥善处理了主内容区域的布局。这种技术在构建专业的简历页面、仪表盘或任何需要持久性导航/信息展示的Web应用中都非常有用。记住，在实际项目中，还需结合响应式设计和可访问性原则，以提供最佳的用户体验。

以上就是CSS实现固定左侧容器布局：构建可滚动技能列表的教程的详细内容，更多请关注php中文网其它相关文章！