CSS grid with fixed sidebar

问题

I need a fixed header and sidebar on my site, beyond a central div. The sidebar should have a scrollbar of its own, just like the central div. I thought that grid layout would be the way to do this, but I can't avoid the body to display a common scrollbar, instead of each container displaying its own.

How should I do it? Is grid indeed the simpler solution?

body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  margin: 0;
}

header {
  background-color: #add790;
  grid-column: 1/3;
  grid-row: 1;
  text-align: center;
}

main {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: stretch;
}

nav {
  background-color: orange;
  padding: 1em;
  min-height: 0;
}

#divMain {
  padding: 1em;
}

<header>
  <h1>Title</h1>
</header>
<main>
  <nav>
    <p>Navigation</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
  </nav>
  <div id='divMain'>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
  </div>
</main>

回答1:

html,body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

header {
  background-color: #add790;
  text-align: center;
}

main {
  flex: 1;
  display: flex;
  min-height: 0;
}

nav {
  background-color: orange;
  width: 20%;
  overflow: auto;
  padding: 1em;
}

article {
  width: 80%;
  overflow: auto;
  padding: 1em;
}

<header>
  <h1>Title</h1>
</header>
<main>
  <nav>
    <p>Navigation</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
  </nav>
  <article>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
  </article>
</main>

来源：https://stackoverflow.com/questions/58562531/css-grid-with-fixed-sidebar

标签

css

css-grid