html – 向CSS Grid Layout中的每一列添加滚动

概述我希望在我的网格布局中的每个列上单独滚动. 目前,我正在开发一个仅限移动的Web应用程序.我想为纵向和横向使用不同的网格布局. 纵向方向只有1列,每个元素都在另一列之后.这里没问题. 在横向方向,我想使用2列.我的整个内容显示在左侧,导航移动到右侧.现在我希望两个部分都有一个单独的滚动.有没有办法实现这个？如果当前列的内容结束,则滚动应该停止. CodePen上的代码：https://codepe 我希望在我的网格布局中的每个列上单独滚动.

目前,我正在开发一个仅限移动的Web应用程序.我想为纵向和横向使用不同的网格布局.

纵向方向只有1列,每个元素都在另一列之后.这里没问题.

在横向方向,我想使用2列.我的整个内容显示在左侧,导航移动到右侧.现在我希望两个部分都有一个单独的滚动.有没有办法实现这个？如果当前列的内容结束,则滚动应该停止.

CodePen上的代码：https://codepen.io/SuddenlyRust/pen/rmJOqV

.grID-container {  display: grID;  grID-template-columns: 1fr;  grID-template-rows: 1fr;  grID-gap: 15px 0;}header {  background-color: green;  grID-column: 1;  grID-row: 1}main {  background-color: blue;  grID-column: 1;  grID-row: 2;}nav {  background-color: pink;  grID-column: 1;  grID-row: 3;}footer {  background-color: teal;  grID-column: 1;  grID-row: 4;}@media only screen and (orIEntation: landscape) {  .grID-container {    grID-template-columns: 5fr 4fr;  }  nav {    grID-column: 2;    grID-row: 1 / span 3;  }  footer {    grID-row: 3;  }}h1 {  min-height: 200px;}

<div >  <header>    <h1>logo</h1>  </header>  <main>    <h1>content</h1>  </main>  <nav>    <h1>Navigation</h1>  </nav>  <footer>    <h1>Footer</h1>  </footer></div>

非常感谢您的宝贵时间！

解决方法

In the landscape orIEntation I want to use 2 columns. My whole content is displayed on the left sIDe and my navigation moves to the right sIDe. Now I want both parts to have a separate scroll. Is there a way to implement this? And the scroll should stop if the content of the current column ends.

在左列中,您有三个单独的网格项：标题,主页和页脚元素.

在右列中,您有一个网格项：nav元素.

向左列添加滚动条(垂直或水平)是不可行的,因为有三个单独的元素.您需要将所有元素包装在容器中,以便单个滚动条工作.

向右列添加滚动条(垂直或水平)非常简单,因为只有一个元素.

假设您正在谈论垂直滚动条,这是使其工作的一种方法：

body {  @R_301_5553@: 0;}.grID-container {  display: grID;  grID-template-columns: 1fr;  grID-template-rows: 1fr;  grID-gap: 15px 0;  height: 100vh;}header {  background-color: green;  grID-column: 1;  grID-row: 1}main {  background-color: blue;  grID-column: 1;  grID-row: 2;}nav {  background-color: pink;  grID-column: 1;  grID-row: 3;  overflow: auto;}footer {  background-color: teal;  grID-column: 1;  grID-row: 4;}@media only screen and (orIEntation: landscape) {  .grID-container {    grID-template-columns: 5fr 4fr;    grID-template-rows: 1fr 1fr 1fr;  }  nav {    grID-column: 2;    grID-row: 1 / span 3;  }  footer {    grID-row: 3;  }}

<div >  <header>    <h1>logo</h1>  </header>  <main>    <h1>content</h1>  </main>  <nav>    <h1>Navigation<br><br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br></h1>  </nav>  <footer>    <h1>Footer</h1>  </footer></div>

revised codepen

浏览器支持CSS网格

> Chrome – 2017年3月8日全面支持(第57版)
> firefox – 截至2017年3月6日的全面支持(第52版)
> Safari – 截至2017年3月26日的全面支持(版本10.1)
> Edge – 截至2017年10月16日全面支持(版本16)
> IE11 – 不支持当前规范;支持过时的版本

这是完整的图片：http://caniuse.com/#search=grid

总结

以上是内存溢出为你收集整理的html – 向CSS Grid Layout中的每一列添加滚动全部内容，希望文章能够帮你解决html – 向CSS Grid Layout中的每一列添加滚动所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。