How to Make a Scrollable Element Fill 100% of the Remaining Height of a Parent Element

Scrollable div to fill remaining height of parent

Try this. It uses display:table and table-row. The content has position:absolute with left, top, right, and bottom set to 0.

https://jsfiddle.net/dsyh8xtv/22/

.parent {  display: table;  height: calc(100vh - 200px);  background-color: white;  border: 1px solid #eee;}
.child {  display: table-cell;  height: 100%;}
.child:nth-child(1) {  background-color: blue;  color: #fff;}
.child:nth-child(2) {  background-color: yellow;}
.sub-parent {  display: block;  background-color: pink;  height: 100%;  display:table;}
.sub-child {  width: 100%;  display:table-row;}
.sub-child:nth-child(1) {  background-color: red;  color: #fff;}
.sub-child:nth-child(2) {  background-color: orange;  height:100%;}
.content-wrapper {  width:100%;  height:100%;  position:relative;}
.content {  overflow-y:auto;  position:absolute;  left:0;  top:0;  right:0;  bottom:0;}

<div class="parent">  <div class="child">    regular child  </div>  <div class="child">    <div class="sub-parent">      <div class="sub-child">        this one has a dynamic height        <br/>        this one has a dynamic height      </div>      <div class="sub-child">        <div class="content-wrapper">          <div class="content">            this one should fill the remaining height and be scrollable            this one should fill the remaining height and be scrollable            this one should fill the remaining height and be scrollable            this one should fill the remaining height and be scrollable            this one should fill the remaining height and be scrollable            this one should fill the remaining height and be scrollable            this one should fill the remaining height and be scrollable            this one should fill the remaining height and be scrollable            this one should fill the remaining height and be scrollable            this one should fill the remaining height and be scrollable            this one should fill the remaining height and be scrollable            this one should fill the remaining height and be scrollable            this one should fill the remaining height and be scrollable            this one should fill the remaining height and be scrollable            this one should fill the remaining height and be scrollable            this one should fill the remaining height and be scrollable            this one should fill the remaining height and be scrollable            this one should fill the remaining height and be scrollable            this one should fill the remaining height and be scrollable            this one should fill the remaining height and be scrollable            this one should fill the remaining height and be scrollable            this one should fill the remaining height and be scrollable          </div>        </div>      </div>    </div>  </div></div>

Make a div fill the height of the remaining screen space

2015 update: the flexbox approach

There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.

Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.

(taken from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.

To check current support you can also see here:
http://caniuse.com/#feat=flexbox

Working example

With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.

html,body {  height: 100%;  margin: 0;}
.box {  display: flex;  flex-flow: column;  height: 100%;}
.box .row {  border: 1px dotted grey;}
.box .row.header {  flex: 0 1 auto;  /* The above is shorthand for:  flex-grow: 0,  flex-shrink: 1,  flex-basis: auto  */}
.box .row.content {  flex: 1 1 auto;}
.box .row.footer {  flex: 0 1 40px;}

<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box">  <div class="row header">    <p><b>header</b>      <br />      <br />(sized to content)</p>  </div>  <div class="row content">    <p>      <b>content</b>      (fills remaining space)    </p>  </div>  <div class="row footer">    <p><b>footer</b> (fixed height)</p>  </div></div>

Child DIV fill remaining height with scrollable content

Using flexbox can solve your problem.

A simple example:

.C {
  display: flex; /* this enables flex layout */
  flex-direction: column; /* child divs are placed in column */
  height: 300px; /* Parent container must have a fixed height */
}
.A {
  flex: 0 0 auto; /* div A should remain its original height (neither expand nor shrink) */
}
.B {
  flex: 1 1 auto; /* div B should fit the remaining space */
  overflow-y: auto; /* enable scroll bar when div D exceeds div B's height */
}

For a live example, see this fiddle

How to make a scrollable section inside div that fills in all the remaining space of said div

Run snippet, and click 'full page' then scale browser and scrolling area should be dynamic in height. Only tested in Chrome btw.

const App = () => {

  return (
    <div className="container">
      <div className="inner">
        <h2>My Content</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
        <h3>Scrollable section that must fill in the rest of the space</h3>
        <div className="scrollable-div">
          {[...Array(50).keys()].map((_, index) => (
            <div>item {index}</div>
          ))}
        </div>
      </div>
    </div>
  );
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

.container {
  display: flex;
  flex-direction: column;
  border: 2px solid #2B3239;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.inner {
  padding: 12px;
  background: #EFF2F5;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.scrollable-div {
  background: white;
  border: 2px solid #FF6F6F;
  flex-grow: 1;
  overflow: scroll;
  padding: 12px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Make div child scrollable inside 100% height parent div

I would change the settings in the media query to

  child {
    min-height: 400px;
    overflow-y: visible;
  }

That forces it to be as high as its content and at least 400px, which will scroll in the body.

https://jsfiddle.net/zy0o7jn6/1/

How can an html element fill out 100% of the remaining screen height, using css only?

The trick to this is specifying 100% height on the html and body elements.
Some browsers look to the parent elements (html, body) to calculate the height.

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">
        </div>
    </body>
</html>

html, body
{
    height: 100%;
}
#Header
{
    width: 960px;
    height: 150px;
}
#Content
{
    height: 100%;
    width: 960px;
}

---

Related Topics