html标题指定位置,html – 允许一个网格项滚动固定标题和侧边栏

最新推荐文章于 2025-04-25 17:21:31 发布

转载最新推荐文章于 2025-04-25 17:21:31 发布 · 148 阅读

文章标签：

本文探讨了在CSS Grid布局中如何通过设置高度限制和溢出条件来触发滚动条显示的问题。作者指出，常规方法如直接对网格项设置溢出属性可能无效，并分享了一个成功的方法，即通过设置子元素的高度来触发滚动条。这种方法在所有支持网格布局的浏览器中都能工作，无需使用固定或粘性定位。

对于溢出：自动工作(即滚动条渲染)浏览器需要触发器.此触发器通常是高度/宽度限制,强制溢出条件,启动滚动条.

触发条件因浏览器而异.它们也因CSS技术而异,例如flex,grid和block layouts.

在这种特殊情况下,有几个逻辑位置可以建立溢出条件,但它们都不起作用.

>您可以尝试以网格项为目标：

.content {

height: 1000px

overflow: auto;

}

但它不起作用.流体项目上不显示滚动条.

body {

margin: 0;

/* overflow: hidden; */

}

.page {

display: grid;

grid-template-rows: 55px auto;

grid-template-columns: 20vh auto;

grid-template-areas: "nav header"

"nav content";

}

.nav {

grid-area: nav;

background-color: aqua;

}

.header {

grid-area: header;

background-color: lightgrey;

}

.content {

grid-area: content;

height: 1000px;

overflow: auto;

background-color: red;

}

Side nav

title

>正如我测试的那样,您可以将行本身作为目标：

.page {

display: grid;

grid-template-rows: 55px 1000px;

}

.content {

overflow: auto;

}

但这也不起作用.流体项目上仍然没有滚动条.

body {

margin: 0;

/* overflow: hidden; */

}

.page {

display: grid;

grid-template-rows: 55px 1000px;

grid-template-columns: 20vh auto;

grid-template-areas:

"nav header"

"nav content";

}

.nav {

grid-area: nav;

background-color: aqua;

}

.header {

grid-area: header;

background-color: lightgrey;

}

.content {

overflow: auto;

grid-area: content;

background-color: red;

}

Side nav

title

>所以我针对网格项目的孩子.丁丁丁！那很有效.

无需固定定位.无需粘性定位.这适用于所有支持网格布局的浏览器.

body {

margin: 0;

}

.page {

display: grid;

grid-template-rows: 55px calc(100vh - 55px); /* height limitation on second row */

grid-template-columns: 20vh auto;

grid-template-areas: "nav header"

"nav content";

}

.nav {

grid-area: nav;

background-color: aqua;

}

.header {

grid-area: header;

background-color: lightgrey;

}

.content {

grid-area: content;

background-color: red;

overflow: auto; /* overflow condition on parent */

}

article {

height: 1000px; /* height set on child; triggers scroll */

}

Side nav