как установить высоту элемента сетки как остальное пространство

Question

В приведенном ниже примере - navbar это 27px высота и top это auto высота;

Проблема - если у меня есть какой-то контент внутри story - прокрутка не работает.Это становится - content-height?

как установить story height - как все остальное пространство от divtop до нижней части экрана, чтобы полоса прокрутки могла работать.

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.navbar {
  position: sticky;
  top: 0;
  width: 100%;
  background: lightseagreen;
  color: white;
  height: 27px;
}

.grid {
  position: fixed;
  top: 27px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: calc(100vh - 27px);
  grid-column-gap: 9px;
  background: silver;
}

.grida,
.gridb {
  display: grid;
  grid-template-rows: auto 1fr;
  background: gold;
}

.divtop {
  background: lightgreen;
  height: auto;
}

.story {
  overflow-y: scroll;
}

<div class='navbar'>NAVBAR</div>
<div class='grid'>
  <div class='grida'>
    <div class='divtop'>TOP</div>
    <div class='story'>STORY</div>
  </div>
  <div class='gridb'>
    <div class='divtop'>TOP</div>
    <div class='story'>STORY</div>
  </div>
</div>

Answer 1

Просто я добавил max-height для вашего grida,gridb класса на основе вашей высоты сетки.Комментарий для получения дополнительной информации.Я надеюсь, что это решение будет полезным.

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.navbar {
    position: sticky;
    top: 0;
    width: 100%;
    background: lightseagreen;
    color: white;
    height: 27px;
}

.grid {
    position: fixed;
    top: 27px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: calc(100vh - 27px);
    grid-column-gap: 9px;
    background: silver;
}

.grida,
.gridb {
    display: grid;
    grid-template-rows: auto 1fr;
    background: gold;
    max-height: calc(100vh - 27px);
}

.divtop {
    background: lightgreen;
    height: auto;
}
.story {
    overflow-y: scroll;
}

<div class='navbar'>NAVBAR</div>
<div class='grid'>
    <div class='grida'>
        <div class='divtop'>TOP</div>
        <div class='story'>STORY</div>
    </div>
    <div class='gridb'>
        <div class='divtop'>TOP</div>
        <div class='story'>STORY</div>
    </div>
</div>

Answer 2

Вот простой макет сетки - поскольку вы используете макет, заполняющий область просмотра, я думаю, вы можете угробить фиксированное и закрепленное позиционирование и вложенных сеток , удалите внутреннюю сетку контейнеры (grida и gridb) и обертывают в контейнер-сетку :

display: grid;
grid-template-columns: 1fr 1fr; /* two columns */
grid-template-rows: auto auto 1fr; /* three rows */
grid-auto-flow: column; /* place grid items in column direction */

Теперь вы можете использовать grid-column: span 2 дляnavbar - см. демонстрацию ниже:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  grid-auto-flow: column; /* place grid items in column direction */
  grid-column-gap: 9px;
  height: 100vh;
}
.navbar {
  background: lightseagreen;
  color: white;
  height: 27px;
  grid-column: span 2; /* span both columns */
}
.grid {
  background: silver;
}

.divtop {
  background: lightgreen;
}

.story {
  overflow-y: auto; /* overflow of content */
  background: gold;
}

<div class="wrapper">
  <div class='navbar'>NAVBAR</div>
  <div class='divtop'>TOP</div>
  <div class='story'>
    some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here
    some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text
    here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some
    text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here
    some text here some text here some text here some text here
  </div>
  <div class='divtop'>TOP</div>
  <div class='story'>
    some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here
    some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text
    here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some
    text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here
    some text here some text here some text here some text here
  </div>
</div>