开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

固定内容和滚动侧边栏，将网格转换为flexbox

基础概念

固定内容：在网页设计中，固定内容是指在页面滚动时保持位置不变的部分，通常用于导航栏、页眉或页脚。

滚动侧边栏：滚动侧边栏是指在页面滚动时可以滚动的侧边栏，通常用于显示大量信息或导航链接。

Flexbox：Flexbox（弹性盒子布局）是一种CSS布局模式，用于创建灵活的、响应式的布局。它通过将元素放入一个容器中，并使用Flexbox属性来控制容器及其子元素的排列方式。

优势

Flexbox：提供了一种更有效的方式来对齐和分布容器内的空间，即使它们的大小是动态的或者未知的。它非常适合于单行或单列布局。
固定内容和滚动侧边栏：这种布局模式可以提高用户体验，使导航和重要信息始终可见，同时允许内容区域自由滚动。

类型

固定内容：可以是顶部导航栏、底部工具栏等。
滚动侧边栏：可以是左侧或右侧的导航菜单、广告栏等。

应用场景

网站导航：顶部固定导航栏，侧边滚动菜单。
仪表板：左侧固定工具栏，右侧滚动显示数据图表。
文章阅读器：顶部固定文章标题，下方滚动显示文章内容。

实现方法

以下是一个简单的HTML和CSS示例，展示如何实现固定内容和滚动侧边栏，并将网格转换为Flexbox布局。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Layout</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="fixed-header">Fixed Header</header>
    <div class="container">
        <aside class="scroll-sidebar">Scroll Sidebar</aside>
        <main class="content">Content Area</main>
    </div>
</body>
</html>

CSS (styles.css)

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

.fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 10px;
    text-align: center;
}

.container {
    display: flex;
    height: calc(100% - 50px); /* Subtract header height */
    margin-top: 50px; /* Add space for fixed header */
}

.scroll-sidebar {
    width: 200px;
    background-color: #f4f4f4;
    overflow-y: auto;
    padding: 10px;
}

.content {
    flex-grow: 1;
    padding: 10px;
    background-color: #fff;
    overflow-y: auto;
}

遇到的问题及解决方法

问题1：侧边栏滚动时内容区域没有扩展

原因：可能是由于Flexbox容器的高度设置不正确。

解决方法：确保.container的高度设置为calc(100% - 50px)，其中50px是固定头部的高度。

问题2：固定头部遮挡内容

原因：可能是由于固定头部的z-index设置不当。

解决方法：确保固定头部的z-index值高于其他内容，例如：

.fixed-header {
    z-index: 1000;
}

参考链接

通过以上方法，你可以实现一个具有固定内容和滚动侧边栏的页面，并使用Flexbox进行布局。

相关搜索:Bootstrap -粘性导航栏，粘性侧边栏(左和右)与动态内容时，您滚动 bootstrap 5侧边栏，包含顶部导航和可滚动内容两个具有固定页眉和页脚的可滚动内容栏为什么我的页脚和内容不在使用flexbox的侧边栏旁边？具有固定页眉和页脚以及可滚动内容的Flexbox 具有最大宽度和中心的内容和侧边栏的css网格页眉固定的侧边栏滚动和停止在页脚如何在bootstrap 4中只让中央面板滚动，而让导航栏和侧边栏保持在固定的位置？如何将侧边栏和正文部分固定在同一行？如何拥有一个可以垂直滚动和水平固定的固定侧边栏

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

如何使用 CSS 设置和自定义水平和垂直滚动条

滚动条是图形用户界面（UI）中必不可少的组件。滚动条允许用户查看超出其容器宽度或高度的内容。滚动条还使用户能够查看超出屏幕宽度或高度的内容。默认情况下，浏览器会为body内容的溢出包含一个滚动条。在其他情况下，UI开发人员必须设置滚动条以使用户能够查看超出屏幕或特定容器的内容。每个浏览器都有一组默认的滚动条样式。在某些情况下，您可能有充分的理由来定制滚动条。例如，您可以定制滚动条样式以匹配网站的外观和感觉。

00

如何使用Flexbox和CSS Grid，实现高效布局

CSS 浮动属性一直是网站上排列元素的主要方法之一，但是当实现复杂布局时，这种方法不总是那么理想。幸运的是，在现代网页设计时代，使用 Flexbox 和 CSS Grid 来对齐元素，变得相对容易起来。

01

【CSS】1287- 一行 CSS 实现 10 种强大的布局

现代 CSS 布局使开发人员只需按几下键就可以编写十分有意义且强大的样式规则。上面的讨论和接下来的帖文研究了 10 种强大的 CSS 布局，它们实现了一些非凡的工作。

02

最全的常见css布局

对于第一种，先通过对 header,content,footer 统一设置 width：1000px;或者 max-width：1000px(这两者的区别是当屏幕小于 1000px 时，前者会出现滚动条，后者则不会，显示出实际宽度);然后设置 margin:auto 实现居中即可得到。

01

新手做网页设计？这9款经典网页布局设计了解下

现在，越来越多的人想要建立自己的网站，通过自助建站系统就可以自己进行网页制作了。这无疑是一件好事，但是，很多设计师，尤其是新手设计师或者压根儿就不是设计师的小白，都在网页设计上走过不少弯路。

03

「Shiny」应用程序布局指南

Shiny 包含了许多用于布局应用程序组件的工具。本指南描述了以下应用程序布局功能特性：

03

使用内联CSS 变量，提高灵巧布局效率！

有些情况下，我需要用一种简单的方法来创建网格布局。例如，每次我改变主意时，在不修改CSS的情况下快速画出五列网格。在本文中，我们一起探索一些用例，并思考如果实现及使用它们。

05

基于react18+arco+vite4桌面版聊天react-webchat

react18-webchat 基于vite4.x+react18创建网页版聊天实战项目。

08

使用内联的 CSS 变量技巧，提高灵巧布局效率！

有些情况下，我需要用一种简单的方法来创建网格布局。例如，每次我改变主意时，在不修改CSS的情况下快速画出五列网格。在本文中，我们一起探索一些用例，并思考如果实现及使用它们。

01

Vue3.x+ElementPlus桌面版聊天实例

2021让vue3生态越来越好，让更多的开发者参与进来。继上次分享了一个vue3移动端聊天实例，这次再给大家分享一个最新开发的vue3.0+饿了么vue3组件库开发的桌面端实例项目。

05

CSS(五)

从这一篇开始，将要介绍 CSS 中最重要的两个知识 - 浮动和定位。前面几篇关于 CSS 的知识，只是讲解了一个元素作为一个个体时的样式，从这篇布局内容开始，将要介绍多个元素放在一起，从总体角度确定每个元素的位置。布局分类:

02

CSS进阶-Flexbox高级布局技巧

Flexbox（Flexible Box Layout Module）是CSS3引入的一种强大而灵活的布局模式，它彻底改变了我们对网页布局的处理方式，尤其是在响应式设计和复杂的多列布局中。然而，尽管Flexbox非常强大，但在实际应用中，开发者仍会遇到一些常见问题和易错点。本文旨在深入浅出地介绍Flexbox的一些高级布局技巧，分析常见问题及其解决方案，并通过代码示例加以说明，帮助你更高效地掌握Flexbox布局的艺术。

01

JavaScript案例：带动画的返回顶部

核心原理：通过定时器setInterval()不断移动盒子位置。实现步骤：获得盒子当前位置让盒子在当前位置加上1个...

01

元素滚动 scroll 系列

scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

03

元素滚动 scroll 系列

scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

02

1.元素滚动 scroll 系列

scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

02

css粘性定位sticky

本文最后更新于2022年06月10日，已超过2天没有更新。如果文章内容或图片资源失效，请留言反馈，我会及时处理，谢谢！

01

vite5.x+vue3 setup网页版pc聊天模板

随着vitejs构建工具快速迭代，越来越多的开发者参与到vue3项目开发中来。最近新开发了一款vue3+element-plus网页版聊天项目。

01

CSS Flexbox 布局完全指南（二）：3000字，多示例讲解

理解 Flexbox 最好的方式是什么？学好基础，再大量练习。这正是我们要在这篇文章中做的事情。

02

最新iOS设计规范三｜3大界面要素：栏(Bars)

iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师，都应当理解并熟悉平台的设计规范。这有利于提高我们的工作效率，保证用户良好的体验。

01

盒模型

盒模型的默认行为,当给一个元素设置宽或高的时候，指定的是内容的宽或高，所有内边距、边框、外边距都是追加到该宽度上的。

02

electron31+vue3 setup桌面端Exe聊天系统

几周之前有开发一款vite5+vue3网页web版聊天项目ViteWchat。这次带来全新跨平台electron31.x+vue3+vite5+element-plus仿微信电脑端聊天程序。

02

分享下如何在Vue项目中进行网页布局

布局是减少代码重复并创建易于维护和专业外观的应用程序的重要模式。如果您正在使用Nuxt，它提供了一个优雅的解决方案。但不幸的是，在Vue中，官方文档根本没有提到它们。这经常导致对于应该在多个应用程序中相似的问题而言，采用次优和不太正规的解决方案。

03

Vogue Shopify主题模板配置修改

Vogue是一个书样式外观高度可视化产品的Shopify主题，可以创造奢华的购物体验，提升您的品牌和销量。

02

vue+web端聊天室|网页端vue聊天系统

使用了Vue2.5.6+Vuex+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术开发，实现了发送消息、表情(动图)，图片、视频预览，仿微信右键菜单、截图可直接粘贴至编辑框发送。

01

JavaScript案例：仿淘宝侧边栏

📷 案例分析原先侧边栏是绝对定位当页面滚动到一定位置，侧边栏改为固定定位页面继续滚动，会让返回顶部显示出来。代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scal

01

【如果你要学JS XIII】——实现放大镜效果、client&scroll属性、固定侧边栏

client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

01

EMLOG教程 - 侧边栏文章标题字数修改方法

本站在修改侧边栏的时候，进行了侧变栏内容固定浮动跟随浏览器，但是问题来了，固定浮动侧边栏之后随机文章的比较长的标题会凸出去外边、或者两行显示，感觉很难看的样子，所以寻找办法修改标题字数使之截断过长的标题！

03

flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

01

css精髓：这些布局你都学废了吗？

前言最近忙里偷闲，给自己加油充电的时候，发现自己脑海中布局这块非常的凌乱混杂，于是花了一些时间将一些常用的布局及其实现方法整理梳理了出来，在这里，分享给大家。单列布局

03

【vite+vue3+Ts+element-plus】肩并肩带你写后台管理之主页面开发（侧边栏菜单生成、标签栏开发）

页面比较简单，主要分为左侧的菜单栏，顶部的导航栏（折叠左侧菜单，切换暗黑模式，员工账号名，退出登录），再下面的标签栏，之后就是主页面显示区域。

03

emlog固定滚动侧边栏实现方法

滚动侧边栏的方式，好处显而易见，当博文较长的时候就不会因为侧边栏太短而产生不美观了。其实有集中方法：另一种方法请参考侧边栏滚动教程；滚动侧边栏的教程，其实很简单，先来看看代码。需要加载jquery。emlog可以直接使用/include/lib/js/jquery/jquery-1.7.1.js。js代码如下：

01

Flutter 的 Drawer 侧边栏以及侧边栏布局

在iOS原生开发中，实现抽屉视图还是比较麻烦的，有时还需要借助第三方组件来实现。但是在Flutter中，我们利用Drawer组件就可以很轻松实现抽屉视图。

02

Dash应用页面整体布局技巧

大家好我是费老师，对于刚上手dash应用开发的新手朋友来说，如何进行合理且美观的页面整体布局构建是一道“难题”。今天的文章中，我就将为大家介绍有关dash应用页面布局的一些实用技巧，并附上几个可以直接套用的dash应用经典页面模板，话不多说，let's go🚀

02

返回顶部案例

带有动画的返回顶部此时可以继续使用我们封装的动画函数只需要把所有的left 相关的值改为跟页面垂直滚动距离相关就可以了页面滚动了多少，可以通过 window.pageYOffset 得到最后是页面滚动，使用 window.scroll(x,y) //1. 获取元素 var sliderbar = document.querySelector('.slider-bar'); var banner = document.queryS

03

仿淘宝返回顶部案例

.案例：返回顶部带有动画的返回顶部此时可以继续使用我们封装的动画函数只需要把所有的left 相关的值改为跟页面垂直滚动距离相关就可以了页面滚动了多少，可以通过 window.pageYOffset 得到最后是页面滚动，使用 window.scroll(x,y) <script> // 1. 获取元素 var sliderbar = document.querySelector(".slider-bar"); var banne

02

next+react仿微信pc端聊天|Next.js聊天

Next.js 是基于 React.js 服务端渲染的SSR 开发框架。让你的网页瞬间拥有SEO功能。

03

shiny入门课【3.布局指引】

概览 shiny提供了几种基本的布局：最简单的布局是左侧边栏右主页的布局。使用栅栏自定义布局使用 tabsetPanel()和navlistPanel()函数实现分段布局。使用 navbarPage()函数实现头部导航布局。侧边栏布局示例如下： ui <- fluidPage( titlePanel("Hello Shiny!"), sidebarLayout( sidebarPanel( sliderInput("obs", "Number of observ

01

Svelte3-Webchat基于svelte.js网页版聊天实例

svelte-webchat一款基于svelte3.x+sveltekit+svelteLayer开发构建的仿微信PC版聊天实例。

06

Joe主题添加文章侧边栏目录

Github 仓库链接：plugins/MenuTree at master · typecho-fans/plugins · GitHub

01

ElementUI中el-container布局固定

在使用ElementUI中的el-container布局时，遇到子组件高度过高，导致父组件侧边栏和页首随滚动条拖动的情况。

03

用Qt写软件系列五：一个安全防护软件的制作（2）

引言在上一篇中讲述了主窗体的创建和设计。主窗体的无边框效果、阴影效果、拖动事件处理、窗体美化等工作在前面的博客中早就涉及，因此上篇博文中并未花费过多笔墨。这一篇继续讲述工具箱（Tool Button）的实现。另外，在实现的过程中还做了另外一个贴心的小功能：可伸缩的侧边栏。不过后来发现应用起来后效果不佳，于是就没在主窗体中加入这个功能了，单独做了一个demo作为示范。工具箱的实现工具箱是将若干的工具按钮组织在一起，为用户提供简便导航功能的一个组件。在Qt中实现这个功能不难，Q

07

飞书这个贴心功能，帮助你高效管理信息

平时通过Notion/飞书进行团队工作的时候，总有这么几个常用文档都需要每次都得在浏览器打开并且排列好顺序，但是有可能隔天又得反复操作😱，不禁感叹：如果能把常用的文档文件都能在一个地方轻松打开就好了！那么，飞书这个功能的更新，你一定会感到很舒适！

02

「docsify」学习笔记

请注意，本文编写于 179 天前，最后修改于 161 天前，其中某些信息可能已经过时。

01

WordPress免费主题：Document，让阅读变得更加方便

😁作为一个程序员，在日常的工作、生活、学习的过程中基本都有很多需要做笔记的地方；做笔记的主要目的之一是为了“温故而知新”，另一个则是为了在下一次遇到的时候，不需要再次耗费精力去找解决方法；回顾自己之前写的那个主题，不管是写还是查都不怎么方便，最终下定决心重写一个主题；以 “方便记、方便查、简约”作为设计核心；开源地址 Github：https://github.com/friend-nicen/theme-document Gitee：https://gitee.com/friend-nicen/the

03

提高 CSS 的 5 个技巧

所以现在内容框包含填充和边框，这导致内容框从中消失，200px -> 160px因为填充和边框的总大小是40px.

02

css布局使用

目录常用居中垂直居中水平居中垂直水平居中单列布局双列&三列布局 ---- 常用居中垂直居中单行文本垂直居中

.parent { line-height: 200px; } 图片垂直居中

.parent { line-height: 200px; } .par

09

防御式CSS是什么？这几点属性重点防御！

很多时候，我们希望有一种方法可以避免某种CSS问题或行为的发生。我们知道，网页内容是动态的，网页上的东西可以改变，从而增加了出现CSS问题或奇怪行为的可能性。

03

优雅设计之美：实现Vue应用程序的时尚布局

页面布局是减少代码重复和创建可维护且具有专业外观的应用程序的基本模式。如果使用的是Nuxt，则可以提供开箱即用的优雅解决方案。然而，令人遗憾的是，在Vue中，这些问题并未得到官方文档的解决。

08

shiny入门课【2.创建用户界面】

titlePanel 和 sidebarLayout 是fluidPage中非常重要的两个组成部分，他们用于创建带侧边栏的主页。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭