div container stretches more than 100% height

Question

I would like to have a scrollbar for a specific div container. So what I currently have is this

$(document).ready(() => {
  for (let i = 0; i < 100; i++) {
    const newDiv = (`<div>Log Item</div>`);
    $("#logsContainer").append(newDiv);
  }
});

#page {
  display: grid;
  grid-template-columns: 50% 50%;
  height: 100%;
}

@media (max-width: 800px) {
  #panel {
    grid-template-columns: 100%;
    grid-template-rows: 50% 50%;
  }
}

#logsContainer {
  overflow-y: scroll;
  height: 100px;
  /* 
    calc(100% - 18px);
    18px because the "Logs" title has a height of 18
  */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="page">
  <div>
    Commands
  </div>

  <div>
    <div>
      Logs
    </div>
    <div id="logsContainer">
    </div>
  </div>
</div>

As you can see the logs have their own scrollbar on a hardcoded height of 100px. I would like to stretch this container to the bottom (100%). Of course I have to subtract the title height from it. So if I pass in calc(100% - 18px); I get this result

$(document).ready(() => {
  for (let i = 0; i < 100; i++) {
    const newDiv = (`<div>Log Item</div>`);
    $("#logsContainer").append(newDiv);
  }
});

#page {
  display: grid;
  grid-template-columns: 50% 50%;
  height: 100%;
}

@media (max-width: 800px) {
  #panel {
    grid-template-columns: 100%;
    grid-template-rows: 50% 50%;
  }
}

#logsContainer {
  overflow-y: scroll;
  height: calc(100% - 18px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="page">
  <div>
    Commands
  </div>

  <div>
    <div>
      Logs
    </div>
    <div id="logsContainer">
    </div>
  </div>
</div>

but as you can see the div container has a height greater than 100% of the page height. How do I stretch that log container correctly?

If you want it to be 100% relative to the viewport height, you could use `height : calc(100vh - 18px)` — AppyGG, Nov 19 '19 at 07:32
I think grid items stretch by default, so make the item display flex, as column and give the remaining space to the logs container. Or of course make actually use of grid and define two columns and two rows. — Felix Kling, Nov 19 '19 at 07:33
@ AppyGG I updated my code to a full reproduction example. On lower screens I put the right side below the left side. Then `height : calc(100vh - 18px)` doesn't work anymore :/ — , Nov 19 '19 at 07:38

David Porcel · Accepted Answer · 2019-11-19T08:56:44.613

You would need to add a height and grid-template-rows values to the css properties of your page div, like this:

$(document).ready(() => {
  for (let i = 0; i < 100; i++) {
    const newDiv = (`<div>Log Item</div>`);
    $("#logsContainer").append(newDiv);
  }
});

body{
  overflow-y: hidden;
}

#page {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 100%;
  height: 200px;
}

#logsContainer {
  overflow-y: scroll;
  height: calc(100% - 18px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="page">
  <div>
    Commands
  </div>

  <div>
    <div>
      Logs
    </div>
    <div id="logsContainer">
    </div>
  </div>
</div>

What this is doing is setting the column's height of your grid as 100% of your container, in this case the page div which is set to 200px, so your logsContainer will have a height of 200px - 18px.

thank you. The problem is that this solution creates a second scrollbar for the page.. — , Nov 19 '19 at 08:49
I edited my answer adding `overflow-y: hidden` to the `body` tag, so you don't have the second scrollbar you mentioned. — David Porcel, Nov 19 '19 at 08:58

score 0 · Answer 2 · answered Nov 19 '19 at 08:01

0

You need to make sure the body has 0 margin. I'm adding margin: 0 to the body and its work well with your code. Here is the working code.

answered Nov 19 '19 at 08:01

RifkyLTF

302
4
14

Hm this is interesting. Your fiddle worked well but in my VueJs app my main entry HTML file `App.vue` sets the body margin to 0 but there it doesn't work.. – Nov 19 '19 at 08:56

div container stretches more than 100% height

2 Answers2