如何使用CSS Grid布局获取带有粘性页眉和页脚的内容的滚动条？ [英] How to get a scrollbar for content with a sticky header and footer using CSS Grid layout?

问题描述

以下显然是一个菜鸟CSS网格问题，但是如何在CSS网格中创建固定的页眉和页脚，然后创建动态生成< section> 的可滚动主要内容区域。 code>个元素，每个元素都持有固定数量的其他内容元素？我在此处有一支笔，它是Medium帖子的叉子和此处。

我要解决的问题比我在Internet上可以找到的普通CSS网格帖子要复杂一些-足以让很少有人使用CSS经验。

我遇到的麻烦是，主要内容区域中的每个部分都可以容纳 0 和 4 （或其他一些 [最小，最大] 范围）。我一直在想的是，每个部分都一定是 em 个单位，并且有一定的预定空间（在 em 中）可以在每个部分的元素数量之间垂直划分空间，或者每个元素的大小固定为 em 单位（可能更好）。章节的总数不受限制，因此主要内容区域的滚动条将遍及所有章节。

在链接的笔中，我尝试做在第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>第1< / h2> 
< a href =＃>显示全部< / a> 
< / header> 
< ul> 
< li>第1节，项目1。 
< li>第1节，项目2。 
< li>第1节，项目3。 
< li>第1节，项目4。 
< / ul> 
< / section> 
< section> 
< header> 
< h2>第2< / h2> 
< a href =＃>显示全部< / a> 
< / header> 
< ul> 
< li>第1节，项目1。 
< li>第2节，项目2。 
< li>第3节，项目3。 
< / ul> 
< / section> 
< section id = unroll> 
< button>显示所有部分中的全部< / button> 
< / section> 
< button id = toggle-sidebar><< / button> 
< footer> 
< p>这是一个页脚< / p> 
< footer> 
< / main> 
  

虽然试图解决这个问题实际上造成了另一个问题。在原始笔中，可以将侧栏切换为在主要内容区域上流动。现在，我已经解决了这个问题，看来我再也做不到了，而且不确定是什么问题，也不确定如何解决。

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

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




2. 当我调整笔窗口大小时，会出现白色泄漏从左侧开始。它有一些一般的切换问题。




3. 如何恢复切换菜单？或者换句话说，我在这里看不到什么问题？ ：）

解决方案

假设我在这里没有遗漏任何东西。 / p>

滚动内容区域：

只需添加

  height：200px; / *适合您的高度* / 
overflow-y：auto; 
  

overflow-y 控制垂直滚动条。

白色泄漏

尽管在您的笔中这对我而言并没有发生，但在2K屏幕上，
可能会将 width 添加到主视图
将其设置为 100vw -vw代表视图宽度。

我的按钮在哪里？！

好吧，因为您已使用 transform，它是隐藏的：scale（0）;
基本上将其设置为没有大小：）。

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

如果我错过了任何事情，请发表评论，我会尽力回答：）

UPDATE：

根据您的评论：

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

Scrollable co帐篷-添加：

  #content {
 grid-area：content; 
高度：自动； 
overflow-y：自动; 
最大高度：100vh; 
} 
  

部分溢出！

你的数学错了：

  #content section ul {
 min-height：5em; 
最大高度：20em; 
} 
 #content section ul li {
 min-height：5em; 
最大高度：5em； 
} 
 
 section ul li {
 list-style：none; 
 background-color：＃ff00ff; 
保证金：0.5em； 
} 
  

请参阅。 5 * 4em = 20em。

但是每个元素周围有0.5em的保证金。
表示6 * 0.5em（元素之间）+ 1em（顶部和底部）= 4em

所以24em可以！

  #content section ul {
 min-height：5em; 
最大高度：24em； 
} 
  

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

侧边栏切换

在移动视图上工作（虽然不正确）

脚步

页脚的预期行为是什么？保持页脚？ ;）
在这里：
更改

  @media（最大宽度：640px）{
 body {
 grid-template-areas：'header header''content content''footer footer'; 
} 
 ... 
  

至

  @media（最大宽度：640px）{
 .grid {
 grid-template-areas：'header header''content content ''页脚页脚'; 
} 
 ... 
  

最好将页脚添加到网格中：）

也用于普通视图

 网格模板区域：标题标题侧边栏内容'页脚页脚'; 
  

并添加

  footer {
网格区域：footer; 
} 
  

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

The following is obviously a rookie CSS grid question, but how can one create a fixed header and footer in CSS grid and then create a scrollable main content area that has dynamically generated <section> elements each holding a fixed number other content elements? I have a pen here which is a fork of a Medium post and a pen from here.

The problem I'm trying to solve is a bit more complicated than the usual CSS grid posts I could find in Internet -- sufficiently so to someone with very little CSS experience.

The complication I experience is that each section in the main content area can hold elements between 0 and 4 (or some other [min, max] range). The idea I've been toying with is that each section is certain em units high and some predetermined space (in em units) space is either divided vertically between the number of elements in each section or each element has a fixed size in em units (probably better). The overall number of sections isn't limited, so hence a scroll bar for the main content area that goes over all the sections.

In the linked pen I try to do this in Section 1, but as can be seen, not with good results. The contents of the first section overflows over the container over to the next one. I might be able to fiddle this so that I'll just adjust "magic numbers" in CSS, but it'd be nice to have ideas how to make this a bit more dynamic.

The HTML looks like this

<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>

While trying to solve this has actually created another problem. In the original pen the sidebar can be toggled to flow over the main content area. Now fidding this what I have, it appears I'm not able to do that anymore and I'm not sure what's the problem -- nor how to solve it.

So, two related problems in grid layout:

1. How to scroll a main content area of some height when the area has some number of sections each having between 0 and 4 elements. The vertical size of the sections can be fixed and the size of individual elements can be fixed.

2. When I resize the pen window, there's a "white leak" from the left side. It has something to have the general toggling problem.

3. How to bring back the toggle menu? Or put otherwise, what's the problem I fail to see here? :)

解决方案

Assuming I'm not leaving anything out here.

Scroll content area:

Just add

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

overflow-y controls the vertical scrollbar.

white leak

Though it doesn't happen for me in your Pen, on 2K screen, maybe add width to the main view set it to 100vw - vw stands for View Width.

Where's my button?!

Well , it's hidden becouse you have used transform:scale(0); which basically set it to have no size :).

Here is the "fixed" version https://codepen.io/itamarshdev/pen/RBBgxY

If I have missed anything, comment and I'll do my best to reply :)

UPDATE:

According to you comment:

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

Scrollable content - add:

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

section is overflowing!

Well your math was wrong:

#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;
}

See. 5*4em = 20em.

But you have margin on 0.5em around each element. this meand 6*0.5em (between the elements) + 1em (top and bottom) = 4em

So 24em will do!

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

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

Sidebar Toggling

Works on mobile view (not to the correct side though)

Footer

What is the expected behavior for the footer? to stay a footer? ;) Here you go: change

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

to

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

Also better add the footer to grid :)

Also for "normal view"

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

And add

footer {
   grid-area: footer;
}

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

这篇关于如何使用CSS Grid布局获取带有粘性页眉和页脚的内容的滚动条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！