代码之家 › 专栏 › 技术社区 › Veksi

如何使用CSS网格布局为具有粘性页眉和页脚的内容获取滚动条?

css-grid css3 html5 css html

Veksi · 技术社区 · 6 年前

下面显然是一个新的CSS网格问题,但是如何在CSS网格中创建一个固定的页眉和页脚,然后创建一个动态生成的可滚动的主内容区域呢 <section> 每个元素都包含固定数量的其他内容元素?我有一支钢笔 here 那是一个中柱叉和一支笔 here .

我试图解决的问题比我在互联网上找到的通常的CSS网格帖子要复杂得多——对一个没有CSS经验的人来说就足够了。

我所经历的复杂情况是,主内容区域中的每个部分都可以在 0 和 4 (或其他 [min, max] 范围)。我一直在考虑的是每个部分都是确定的 em 单位高和一些预定的空间(in 相对长度单位 单位)空间在每个部分的元素数量之间垂直划分,或者每个元素在 相对长度单位 单位(可能更好)。节的总数不受限制,因此主内容区域的滚动条覆盖了所有节。

在连接笔里我试着这样做 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>

在试图解决这一问题的同时,实际上又产生了另一个问题。在原始画笔中,侧边栏可以切换为在主内容区域上流动。现在把我的东西摆弄得乱七八糟,看来我再也做不到了,我不知道问题出在哪里,也不知道如何解决。

因此,网格布局中有两个相关问题:

如何在主内容区域具有一定数量的节(每个节具有0到4个元素)时滚动一定高度的主内容区域。截面的垂直尺寸可以固定,单个元素的尺寸可以固定。
当我调整钢笔窗口的大小时,左边有一个“白色的漏洞”。总的来说,这是个切换问题。
如何恢复切换菜单?或者换个说法,我在这里看不到的问题是什么?:)

1 回复 | 直到 6 年前

Itamar 6 年前

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

滚动内容区域:

只需添加

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

overflow-y 控制垂直滚动条。

白色泄漏

虽然在你的笔里,在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