CODEWITHSUNDEEP
htmlcsscss-grid
qadenza
qadenza

Reputation: 9293

how to set grid element height as the rest of space

In the example below - navbar is 27px height and top is auto height;

Problem - if I have some content inside story - scrolling doesn't work. It becomes - content-height?

how to set story height - as the entire rest of space from divtop to bottom of screen, so the scrollbar could work. 

* {
  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>

Upvotes: 1

Views: 563

Answers (2)

kukkuz
kukkuz

Reputation: 42370

Here's a simple grid layout - because you are using a viewport-filling layout I guess you can ditch fixed and sticky positioning and nested grids, remove your inner grid containers (grida and gridb) and wrap it into a grid container:

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 */

Now you can use grid-column: span 2 for the navbar - see demo below:

* {
  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>

Upvotes: 0

Saravana
Saravana

Reputation: 3506

Simply I have added the max-height for your grida,gridb class based on your grid height. Comment for further information. I hope this solution will be helpful.

* {
    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>

Upvotes: 1

Related Questions