0

I've got a div, I need the bottom div to fill the remainder of the screen and show a scroll bar. The bottom div is not showing a scroll bar.

JSFiddle

.page {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: $menu-height 0 0 0;
  box-sizing: border-box;
}

.sidebar {
  width: 500px;
  float: left;
  height: 100%;
  box-sizing: border-box;
  background: #ddd;
  border-right: 1px solid red;
}

.top {
  height: 200px;
  background: #eee;
}

.bottom {
  background: #ccc;
  overflow-y: auto;
}

.filler-content {
  height: 2000px;
}
<div class="page">
  <div class="sidebar">
    <div class="top">
      top
    </div>
    <div class="bottom">
      <div class="filler-content">
        bottom
      </div>
    </div>
  </div>
</div>
Pete
  • 57,112
  • 28
  • 117
  • 166
el_pup_le
  • 11,711
  • 26
  • 85
  • 142

4 Answers4

1

If I understood your problem correctly, display: flex is your friend. Add display: flex; flex-direction: column; to your .sidebar and flex: 1; to your .bottom and that should do it. If I misunderstood, just let me know in a comment and I'll try to help otherwise

Demo: http://jsfiddle.net/qy5fL29t/23/

elveti
  • 2,316
  • 4
  • 20
  • 27
1

I would use a flexbox solution as it will make it a lot simpler and get rid of the need for using floats (we shouldn't be abusing them in the day of css3)

html,
body {
  height: 100%;
  margin: 0;
}

.page {
  height: 100%;
  display: flex;            /* this one is so that you don't need to float the sidebar and can insert a main area that will take up the rest of the width */
  flex-direction: column;
  flex-wrap: wrap;           
}

.sidebar {
  width: 500px;
  height: 100%;
  display: flex;            /* this is so we can get bottom to take any height top doesn't need */
  flex-direction: column;
  background: #ddd;
  border-right: 1px solid red;
}

.top {
  flex-basis:200px;
  min-height: 200px;           /* these two are to force top to be 200px otherwise flex may recalculate based on available space */
  max-height: 200px;
  background: #eee;
}

.bottom {
  flex-grow: 1;             /* this forces bottom to grow to fill the space top doesn't take */
  overflow-y: auto;
}


/* test and example below */
.filler-content {
   height:1000px;
}

.main {
  flex-grow: 1;
  background: white;
}
<div class="page">
  <div class="sidebar">
    <div class="top">
      top
    </div>
    <div class="bottom">
      <div class="filler-content">
        bottom
      </div>
    </div>
  </div>
  <div class="main">
  </div>
</div>
Pete
  • 57,112
  • 28
  • 117
  • 166
1

Replace your css with this

.sidebar {
  width: 500px;
  float: left;
  height: 100%;
  box-sizing: border-box;
  background: #ddd;
  border-right: 1px solid red;
}

.top {
  height: 200px;
  background: #eee;
}
.bottom {
  background: #ccc;
  overflow-y: scroll;
  height:200px
}

.filler-content {
height:2000px;
}
<html>
<body>
  <div class="page">
    <div class="sidebar">
      <div class="top">
      top
      </div>
      <div class="bottom">
        <div class="filler-content">
          bottom
        </div>
      </div>
    </div>
  </body>
</div>
</html>
Arjun Pandi
  • 266
  • 2
  • 12
0

You can use this code for bottom div srollbar.

.bottom {
  background: #ccc;
  overflow-y: auto;
  height:200px;

}
Dhara Patel
  • 74
  • 5