时间戳

首页 > 解决方案 > 如何让溢出在 CSS 网格中正常工作？

html - 如何让溢出在 CSS 网格中正常工作？

问题描述

我刚刚开始学习 CSS 网格，并决定尝试构建来自 FCC 的技术文档页面挑战：https ://codepen.io/freeCodeCamp/full/NdrKKL

在我的实现中，我可以达到 85%，但我正在努力让溢出正常工作，以便侧边栏和内容都可以独立滚动。我认为这可能是某个地方的保证金问题，但无法确定在哪里。

当我申请时：

  overflow: auto;

就我的内容而言，它切断了我一半的 HTML。

我哪里错了？

https://codepen.io/braedongough/pen/PVYvzR

标签： htmlcsscss-grid

解决方案

对于侧边栏，添加一个position: fixed;这基本上使侧边栏和内容“分离”。

对于内容，添加一个margin-left: 200px;That number 可以是您想要的任何数字。您需要这样做，否则侧边栏和您的内容将重叠（因为侧边栏具有固定位置）。

height: 100vh;从内容中删除。它会导致它占据整个屏幕并打破溢出。

我为您修复了您的 codepen：https ://codepen.io/newracket/full/bzbyxJ

推荐阅读