2

I have this kind of structure, where I am wrapping three divs (top, middle, bottom) inside a div (wrapper):

#wrapper {
  width: 60%;
  height: 200px;
  border: 2px solid red;
  margin: 0 auto;
  position: relative;
}

#top {
  height: 50px;
  background: green;
}

#middle {
  background: orange;
  overflow: auto;
}

#bottom {
  background: blue;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  padding: 10px 0;
}
<html>

<body>
  <div id="wrapper">
    <div id="top">
      Top
    </div>
    <div id="middle">
      <ul>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
      </ul>
    </div>
    <div id="bottom">
      Bottom
    </div>
  </div>
</body>

</html>

As you can see the wrapper div has a fixed height, and the bottom div is positioned absolute in relation to the wrapper div. And the middle div has a list of contents, which is are out of the wrapper div. What I want to achieve is to make the middle div take only the remaining height is between the top div and the bottom div and still be able to scroll. How can I achieve this?

Kakar
  • 5,354
  • 10
  • 55
  • 93

3 Answers3

2

easiest way is to use flex :(actually seems to be a duplicate)

#wrapper {
  width: 60%;
  height: 200px;
  border: 2px solid red;
  margin: 0 auto;
  display: flex;
  flex-flow: column;
}
#top {
  height: 50px;
  background: green;
}
#middle {
  flex: 1;
  background: orange;
  overflow: auto;
}
#bottom {
  background: blue;
  padding: 10px 0;
}
<html>

<body>
  <div id="wrapper">
    <div id="top">
      Top
    </div>
    <div id="middle">
      <ul>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
      </ul>
    </div>
    <div id="bottom">
      Bottom
    </div>

  </div>
</body>

</html>

the display:table property and absolute positionning can help for older browsers:

#wrapper {
  width: 60%;
  height: 200px;
  border: 2px solid red;
  margin: 0 auto;
  display: table;
  table-layout: fixed;
}
#top,
#bottom {
  color: white;
  display: table-cell;
  vertical-align: middle
}
#middle {
  display: table-row;
}
#top {
  height: 50px;
  background: green;
}
#middle {
  background: orange;
  position: relative;
  height: 100%;
}
#middle .buffer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}
#bottom {
  height: 1%;
  background: blue;
  padding: 10px 0;
}
<div id="wrapper">
  <div id="top">
    Top
  </div>
  <div id="middle">
    <div class="buffer">
      <ul>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
      </ul>
    </div>
  </div>
  <div id="bottom">
    Bottom
  </div>
</div>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
0

You could do something like this with your css: 

#wrapper {
  width: 60%;
  height: 200px;
  border: 2px solid red;
  margin: 0 auto;
  position: relative;
}

#top {
  height: 25%;
  background: green;
}

#middle {
  background: orange;
  overflow:scroll;
  height:50%;
}


#bottom {
  background: blue;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  padding: 10px 0;
  height:15%
}

Here is the jsfiddle. This will let you scroll if your content is too big to hold. I added some extra height parameters, but you can change them to fix your specific needs. The important thing is to set your overflow to scroll so that if there is extra content, the DOM will scroll so you can see all the content.

BlackHatSamurai
  • 23,275
  • 22
  • 95
  • 156
  • Yes, and I have changed removed `overflow:scroll` and added these properties `overflow-y:scroll; overflow-x: hidden;`. But there's still a thik white line between the #middle and #bottom div. That feels very odd. Is there anyway to remove that? [jsfiddle](https://jsfiddle.net/5L8x2cea/) – Kakar Dec 29 '16 at 19:38
  • Yes, just update how big the middle is. I just added another 5%: https://jsfiddle.net/5L8x2cea/1/ – BlackHatSamurai Dec 29 '16 at 19:49
-1

simply give overflow:hidden to wrapper. To hide anything that overflows out of the container/wrapper div.

or overflow: scroll; if you want to have access to the hidden content ( but this adds a nasty scrollbar on some areas).

#wrapper {
  width: 60%;
  height: 200px;
  border: 2px solid red;
  margin: 0 auto;
  position: relative;
  overflow:hidden;

}

#top {
  height: 50px;
  background: green;
}

#middle {
  background: orange;
  overflow: auto;
}

#bottom {
  background: blue;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  padding: 10px 0;
}
<html>

<body>
  <div id="wrapper">
    <div id="top">
      Top
    </div>
    <div id="middle">
      <ul>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
        <li>Some content</li>
      </ul>
    </div>
    <div id="bottom">
      Bottom
    </div>
  </div>
</body>

</html>
DNaNoob
  • 59
  • 8
Mahaveer
  • 435
  • 4
  • 14