问题

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:

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.
When I resize the pen window, there's a "white leak" from the left side. It has something to have the general toggling problem.
How to bring back the toggle menu? Or put otherwise, what's the problem I fail to see here? :)

回答1:

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';
  }
 ...

@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

来源：https://stackoverflow.com/questions/51696891/how-to-get-a-scrollbar-for-content-with-a-sticky-header-and-footer-using-css-gri

标签

html

css

html5

css3

css-grid

How to get a scrollbar for content with a sticky header and footer using CSS Grid layout?

问题