CSS сетка с фиксированной боковой панелью - PullRequest
Новая
       1

CSS сетка с фиксированной боковой панелью

0 голосов
/ 25 октября 2019

Мне нужен фиксированный заголовок и боковая панель на моем сайте, кроме центрального делителя. Боковая панель должна иметь собственную полосу прокрутки, как и в центральном div. Я думал, что компоновка сетки будет способом сделать это, но я не могу не позволить телу отображать общую полосу прокрутки, вместо того, чтобы каждый контейнер отображал свою собственную.

Как мне это сделать? Сетка действительно более простое решение? 

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 Ответ

0 голосов
/ 28 октября 2019 

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