我有一个网格布局,有两列和两行.粘滞的左侧导航,粘性标题以及将位于网格右下角的内容.
我现在几乎就在那里,但我希望.content div在内容超出屏幕时使用滚动.我以为我可以只使用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: blue;
}
.header {
grid-area: header;
background-color: grey;
}
.content {
grid-area: content;
height: 1000px; // This is dynamic
background-color: red;
}
<div class="page">
<div class="nav">Side nav</div>
<div class="header">Header</div>
<div class="content">
<h1>title</h1>
</div>
<div>
解决方法
对于溢出：自动工作(即滚动条渲染)浏览器需要触发器.此触发器通常是高度/宽度限制,强制溢出条件,启动滚动条.
触发条件因浏览器而异.它们也因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;
}
<div class="page">
<div class="nav">Side nav</div>
<div class="header">Header</div>
<div class="content">
<h1>title</h1>
</div>
<div>
>正如我测试的那样,您可以将行本身作为目标：
.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;
}
<div class="page">
<div class="nav">Side nav</div>
<div class="header">Header</div>
<div class="content">
<h1>title</h1>
</div>
<div>
>所以我针对网格项目的孩子.丁丁丁！那很有效.
无需固定定位.无需粘性定位.这适用于所有支持网格布局的浏览器.
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 */
}
<div class="page">
<div class="nav">Side nav</div>
<div class="header">Header</div>
<div class="content">
<article><!-- new section for content -->
<h1>title</h1>
</article>
</div>
<div>
