带有固定边栏的CSS网格 [英] CSS grid with fixed sidebar

问题描述

除了中央div之外，我还需要在网站上设置固定的标题和侧边栏.侧边栏应具有自己的滚动条，就像中央div一样.我以为网格布局将是实现此目的的方法，但我不能避免正文显示一个公共滚动条，而不是每个容器都显示自己的滚动条.

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>

推荐答案

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>

这篇关于带有固定边栏的CSS网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！