0

I have the following HTML and CSS code:

html, body, #root {
    height: 100%;
    overflow: hidden;
}

body {
    background-color: green;
}

#root {
    text-align: center;
    background-color: white;
    padding-top: 6px;
    padding-bottom: 6px;
    overflow: hidden;

    min-width: 320px;
}

.parent {
    display: inline-block;
    text-align: left;
    height: 100%;

    border-radius: 0.4em;
    overflow: hidden;

    font-size: 1em;
    line-height: 1em;
    width: 300px;
}

.header {
    position: relative;
    height: 3em;
    display: flex;
    align-items: center;
    background-color: gray;

    box-shadow: 0 1px 2px black;
    z-index: 10;
}

.container {
  overflow-y: scroll;
  height: 100%;
}
<html>
<body>
<div id="root">
  <div class="parent">
    <div class="header">This is the header</div>
    <div class="container">
      <div class="entry">Text</div>
      <div class="entry">Text</div>
      <div class="entry">Text</div>
      <div class="entry">Text</div>
      <div class="entry">Text</div>
      <div class="entry">Text</div>
      <div class="entry">Text</div>
      <div class="entry">Text</div>
      <div class="entry">Text</div>
      <div class="entry">Text</div>
      <div class="entry">Text</div>
      <div class="entry">Text</div>
      <div class="entry">Text</div>
      <div class="entry">Text</div>
      <div class="entry">Text</div>
      <div class="entry">Text</div>
      <div class="entry">Text</div>
      <div class="entry">Text</div>
      <div class="entry">Text</div>
      <div class="entry">Text</div>
      <div class="entry">Text</div>
      <div class="entry">Text</div>
      <div class="entry">Text</div>
      <div class="entry">Text</div>
      <div class="entry">Text</div>
      <div class="entry">Text</div>
      <div class="entry">Text</div>
      <div class="entry">Text</div>
      <div class="entry">Text</div>
      <div class="entry">Text</div>
    </div>
  </div>
</div>
</body>
</html>

As you can see, there is a problem with the scrollbar for "container". I would like it to be exactly 100% of the area available to that container, but somehow it understands this height as 100% of available screen space. What is the correct approach here to get this right?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
overwriter
  • 31
  • 5
  • For the container try `height: calc(100% - 3rem);`. That is the height of the screen space minus the height of the header. You might need to subtract a bit more, for the border and padding, but I hope the general idea is clear. – KIKO Software Aug 02 '23 at 22:29
  • Interesting, thank you for the suggestion! Isn't there a more direct way, something that expresses via CSS: "_take all available vertical space of this element as the height of the scrollbar_"? – overwriter Aug 02 '23 at 22:32
  • Yes, there probably is. Your CSS is currently a bit all over the place... It needs to be rewritten. – KIKO Software Aug 02 '23 at 22:33
  • Thanks for the feedback. Could you be more specific about what parts of it are all over the place? – overwriter Aug 02 '23 at 22:35
  • Anyway, the container is currently a child element of "parent", the 100% probably refers to that parent, but that has the header in it as well. Let me rewrite this somewhat. – KIKO Software Aug 02 '23 at 22:36
  • 1
    Yeah, I'm not the guy for this. I cannot do this without the `calc()` thingy somewhere. Have a look at the reason why your question was closed. – KIKO Software Aug 02 '23 at 22:55
  • Thank you in any case, I appreciate your willingness to help. :) – overwriter Aug 02 '23 at 23:00

0 Answers0