Make a div use a scrollbar instead of growing bigger

Question

I have a navbar with a container in it. This container will hold many divs later on. It should act like a tree view. I want the navbar to fill the whole left side from top to bottom. But when the content grows bigger, it should stop growing, a scrollbar should appear.

Using height: 100% does not work because currently my navbar is empty so the bar is a small one.

Here I attached two pictures, showing what I need. I want the bar "navContent" filling untill it reaches the bottom bar.

Here you can see a working fiddle with a full overview, I want the yellow bar to grow till it reaches the bottom.

* {
  margin: 0;
}

.bar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

#navBar {
  height: 100%;
}

#btnBar {
  height: 40px;
}

#navContent {
background-color: yellow;
}

#wrapper {
  margin: 0;
}

#navBar {
  float: left;
  width: 30%;
  overflow: hidden;
}

#mainContainer {
  float: left;
  width: 70%;
  overflow: hidden;
}

#header {
  height: 50px;
  background-color: red;
}

#headerContent {
  height: 100%;
  width: 80%;
}

#headerTitle {
  margin: auto;
}

.headerBtn {
  margin: 0px 10px 0px 10px;
}

#footer {
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
  background-color: red;
}

#footerContent {
  height: 100%;
}

.footerBtn {
  margin: 0px 20px 0px 20px;
}

#mainContainer {
  height: 100%;
  background-color: inherit;
}

<div id="header">
    <div id="headerContent" class="bar">
      <p id="headerTitle">Title</p>
      <button class="btn headerBtn">Profile</button>
      <button class="btn headerBtn">Logout</button>
    </div>
  </div>

  <div id="wrapper">

    <div id="navBar">
      <div id="btnBar" class="bar">
        <button class="btn navBtn">New Folder</button>
        <button class="btn navBtn">New File</button>
        <button class="btn navBtn">Delete</button>
      </div>
      <div id="navContent">

        navContent

      </div>
    </div>

    <div id="mainContainer">
      Content
    </div>

  </div>

  <div id="footer">
    <div id="footerContent" class="bar">
      <button class="btn footerBtn">Help</button>
      <button class="btn footerBtn">Conditions</button>
      <button class="btn footerBtn">Terms</button>
      <button class="btn footerBtn">Imprint</button>
    </div>
  </div>

Can you post the relevant HTML / CSS so that we can help you? — seanysean, Jun 14 '17 at 12:28
Possible duplicate of [Making a div vertically scrollable using CSS](https://stackoverflow.com/questions/9707397/making-a-div-vertically-scrollable-using-css) — vsync, Jun 14 '17 at 12:29
You are required to post a minimal example of the markup showing the problem here, not a jsfiddle. https://stackoverflow.com/help/mcve — Rob, Jun 14 '17 at 12:34

score 3 · Answer 1 · answered Jun 14 '17 at 12:30

3

I think you may be looking for:

overflow-y: scroll;

answered Jun 14 '17 at 12:30

Anna Howell

439
5
7

score 1 · Answer 2 · answered Jun 14 '17 at 12:32

You can just set either a fixed height or a max-height. In both cases a scrollbar will automatically appear if the elements grows beyond the defined height.

If you want the scrollbar always visible (even if the content isn't that high) you can add overflow-y: scroll

score 1 · Accepted Answer · answered Jun 14 '17 at 12:46

Here, you can review what i did here: https://codepen.io/anon/pen/JJRrjG. I used the overflow property: https://developer.mozilla.org/en/docs/Web/CSS/overflow?v=example and percentages for the heights. The code is below:

https://codepen.io/anon/pen/JJRrjG

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  color: #fff;
  font-family: sans-serif;
}
.top {
  height: 10%;
  background: #111; 
}
.navbar {
  height: 10%;
  background: #444;
  width: 50%;
  box-sizing: border-box;
  padding: 0.5%;
  text-align: center;
}
.navbar span {
  margin: 10px;
}
.navbar-content {
  height: 80%;
  width: 50%;
  background: #d9d9d9;
  overflow-y: auto;
}
.everything {
 height: 100%;
}
.filler-space {
  height: 10000px;
  background: blue;
  width: 70%;
  margin: 10px auto;
  color: #fff;
}

<div class="everything">
<div class="top"></div>
<div class="navbar">
  <span>New folder</span>
  <span>New file</span>
  <span>Delete</span>
</div>
<div class="navbar-content">
  <div class="filler-space">I take up a lot of space</div>
  </div>
 <div>

Alberto Egea · Answer 4 · 2017-06-14T13:49:24.377

0

Try it using the property overflow: auto on your class too.

This property is used when the content overflows an element's box. It's very useful when your content is too big to fit in a specified area.

edited Jun 14 '17 at 13:49

answered Jun 14 '17 at 12:33

Alberto Egea

16
3

Make a div use a scrollbar instead of growing bigger

4 Answers4