html – 允许一个网格项滚动固定标题和侧边栏
发布时间:2020-12-14 18:57:19 所属栏目:资源 来源:网络整理
导读:我有一个网格布局,有两列和两行.粘滞的左侧导航,粘性标题以及将位于网格右下角的内容. 我现在几乎就在那里,但我希望.content div在内容超出屏幕时使用滚动.我以为我可以只使用overflow:auto,但这不起作用.我有什么关闭? body { margin: 0; overflow: hidde
我有一个网格布局,有两列和两行.粘滞的左侧导航,粘性标题以及将位于网格右下角的内容.
我现在几乎就在那里,但我希望.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> JS fiddle 解决方法
对于溢出:自动工作(即滚动条渲染)浏览器需要触发器.此触发器通常是高度/宽度限制,强制溢出条件,启动滚动条.
触发条件因浏览器而异.它们也因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> jsFiddle demo (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |