时间戳

首页 > 解决方案 > 如何使用 CSS Grid 布局获取带有粘性页眉和页脚的内容的滚动条？

html - 如何使用 CSS Grid 布局获取带有粘性页眉和页脚的内容的滚动条？

问题描述

以下显然是一个菜鸟 CSS 网格问题，但是如何在 CSS 网格中创建一个固定的页眉和页脚，然后创建一个可滚动的主要内容区域，该区域具有动态生成<section>的元素，每个元素都包含固定数量的其他内容元素？我这里有一支笔，它是一个中号柱的叉子和一支来自这里的笔。

我试图解决的问题比我在 Internet 上找到的通常的 CSS 网格帖子要复杂一些——对于 CSS 经验很少的人来说已经足够了。

我遇到的复杂情况是主要内容区域中的每个部分都可以包含介于0和4（或其他[min, max]范围）之间的元素。我一直在玩弄的想法是每个部分都有一定的em单位高，并且一些预定的空间（以em单位为单位）空间要么在每个部分中的元素数量之间垂直划分，要么每个元素具有以em单位为单位的固定大小（可能更好） . 部分的总数不受限制，因此主要内容区域的滚动条会覆盖所有部分。

在链接的笔中，我尝试在 中执行此操作Section 1，但可以看出，效果不佳。第一部分的内容溢出容器到下一个。我也许可以解决这个问题，这样我就可以在 CSS 中调整“幻数”，但是如果有想法如何使它更有活力，那就太好了。

HTML 看起来像这样

<body>
  <main class="grid">
  <div id="header">header</div>
  <div id="bar">bar</div>
  <div id="sidebar">sidebar</div>  
  <div id="content">
<section>
  <header>
    <h2>Section 1</h2>
    <a href="#">show all</a>
  </header>
  <ul>
    <li>Section 1, item 1.</li>
    <li>Section 1, item 2.</li>
    <li>Section 1, item 3.</li>
    <li>Section 1, item 4.</li>
  </ul>
</section>
<section>
  <header>
    <h2>Section 2</h2>
    <a href="#">show all</a>
  </header>
  <ul>
    <li>Section 1, item 1.</li>
    <li>Section 2, item 2.</li>
    <li>Section 3, item 3.</li>
  </ul>
</section>
<section id="unroll">      
   <button>show all in all sections</button>
</section>    
<button id="toggle-sidebar"><</button>
<footer>
   <p>This is a footer</p>
<footer>
</main>

虽然试图解决这个问题实际上产生了另一个问题。在原始笔中，可以切换侧边栏以流过主要内容区域。现在解决我所拥有的，看来我不能再这样做了，我不确定是什么问题 - 也不知道如何解决它。

因此，网格布局中的两个相关问题：

  1. 当该区域具有一定数量的部分时，如何滚动某个高度的主要内容区域，每个部分具有 0 到 4 个元素。部分的垂直大小可以固定，单个元素的大小可以固定。

  2. 当我调整笔窗口的大小时，左侧有一个“白色泄漏”。它有一些普遍的切换问题。

  3. 如何带回切换菜单？或者换一种说法，我在这里看不到的问题是什么？:)

标签： htmlcsscss-grid

解决方案

假设我不会在这里留下任何东西。

滚动内容区：

只需添加

height:200px; /*whatever height fits you*/
overflow-y:auto;

overflow-y控制垂直滚动条。

白色泄漏

尽管在您的 Pen 中不会发生这种情况，但在 2K 屏幕上，可能会添加width到主视图中，将其设置为100vw- vw 代表视图宽度。

我的按钮呢？！

好吧，它是隐藏的，因为你已经使用 transform:scale(0); 它基本上将它设置为没有大小:)。

这是“固定”版本https://codepen.io/itamarshdev/pen/RBBgxY

如果我遗漏了什么，请发表评论，我会尽力回复:)

更新：

根据你的评论：

笔：https ://codepen.io/itamarshdev/pen/RBBZbd

可滚动内容 - 添加：

#content {
   grid-area: content;
   height: auto;
   overflow-y: auto;
   max-height: 100vh;
}

部分溢出！

那么你的数学是错误的：

#content section ul {
  min-height: 5em;
  max-height: 20em;
}
#content section ul li {
  min-height: 5em;
  max-height: 5em;
}

section ul li {
   list-style: none;   
   background-color:#ff00ff;
   margin:0.5em;
}

看。5*4em = 20em。

但是每个元素周围都有 0.5em 的边距。这意味着 6*0.5em（元素之间）+ 1em（顶部和底部）= 4em

所以 24em 就可以了！

#content section ul {
   min-height: 5em;
   max-height: 24em;
}

笔：https ://codepen.io/itamarshdev/pen/RBBgxY

侧边栏切换

适用于移动视图（虽然不是正确的一面）

页脚

页脚的预期行为是什么？留一个页脚？;) 给你：改变

@media (max-width: 640px) {
  body{
    grid-template-areas: 'header header' 'content content' 'footer footer';
  }
 ...

到

@media (max-width: 640px) {
  .grid {
    grid-template-areas: 'header header' 'content content' 'footer footer';
  }
...

也最好将页脚添加到网格:)

也适用于“正常视图”

grid-template-areas: "header header" "sidebar content" 'footer footer';

并添加

footer {
   grid-area: footer;
}

笔：https ://codepen.io/itamarshdev/pen/RBBZbd

推荐阅读