How to make a div max height equal to the screen height?

Question

See a screenshot from Trello:

How have they managed to make the "widget" to be max of the screen height? and scroll it if it is too high?

I tried max-height: 100% but this does not work.

Here there is a complete code (which does not work as I expect): http://jsfiddle.net/3erc7f0L/

`max-height: 100vh` - meet your new best friends, `vh` and `vw`.... — random_user_name, Sep 24 '18 at 19:12
100% of what? Ask yourself first in css what do the parents define and what can you use in order to go on. So ask yourself when you look at your code. From what, it will grab 100%? — Dorvalla, Sep 24 '18 at 19:14
Possible duplicate of [Make body have 100% of the browser height](https://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height) — Bricky, Sep 24 '18 at 19:24

score 1 · Answer 1 · answered Sep 24 '18 at 19:20

Your card needs to have a particular height if you want to achieve trello like feature.

Then for the header and footer content also give it a some desired height.

For the inner content which you want to scroll should be of 100% height of parent minus (height of header + height of footer). For that you can use calc.

.ss{
  height: 150px; /* Give the main container a desired height */
  width: 150px; /* and a width if you want */
  border: 1px solid #ddd;
}

p.header, p.footer{
  /* header on top and footer on bottom should have a fixed height
     so put the desired height */
  margin: 0;
  height: 30px;
  background: #eee;
}

.scroll{
  /* now the center part should be height of container minus height of 
     header and footer combined */
  padding: 10px;
  height: calc(100% - 60px);
  overflow-y: auto; /* add overflow on y-axis so it add the scroll bar */
}

<div class="ss">
  <p class='header'>Header</p>

  <div class="scroll">
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
    <p>sfddsfds</p>
  </div>

  <p class='footer'>Footer</p>
</div>

Quentin Veron · Answer 2 · 2018-09-24T20:44:43.507

Here is a solution that works with non-fixed heights.

This method is based on Flexbox.

Flexbox support in September 2018: 95.71% (prefixed properties)

body {
  margin: 0;
  height: 100vh;
}

main {
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

header,
footer {
  padding: 1em;
  background: lightblue;
}

.content {
  flex-grow: 1;
  overflow: auto;
  background: rgba(0, 0, 0, 0.1);
}

<main>
  <header>Header</header>
  
  <div class="content">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
    </ul>
  </div>

  <footer>Footer</footer>
</main>

Check it on JSFiddle

score 0 · Accepted Answer · answered Sep 24 '18 at 20:18

Complete solution by my friend: http://jsfiddle.net/yanhaifa/zhrmxd23/28/

html, body {
  height:100%;
  margin:0;
}
.ss, .scroll, .footer {
  box-sizing: border-box;
}

.ss {
  display:flex;
  flex-direction: column;
  max-height: 100%;
  border: 1px solid #ddd;
}

.header {
  flex: 0 0 auto;
}

.scroll{
  flex: 1 1 auto;
  position: relative;
  overflow-y: auto; /* add overflow on y-axis so it add the scroll bar */
}
.footer {
  flex: 0 0 auto;
  margin:0;
  border: 1px solid orange;
  padding:10px;
}

score -1 · Answer 4 · answered Sep 24 '18 at 19:12

-1

You can set max-height: 100vh which limits it to 100% of the viewport's height.

There is also the corresponding unit for width: vw

answered Sep 24 '18 at 19:12

Bricky

2,572
14
30

Replacing `max-height: 100%` with `max-height: 100vh` does not make the code example at JSFiddle to work as needed. So, as I understand, your answer is not correct – porton Sep 24 '18 at 19:15
It does do what you're asking for it to do - the container div with the max-height is scrollable since the content doesn't fit within the frame. But if you want the content to not be visible outside of the div, you'll need to use `overflow: none` – Bricky Sep 24 '18 at 19:17
Also note that `max-height` is the maximum height. It will not make a unit that is smaller than the `max-height` any larger. For that you need to use `height` or `min-height`. – Bricky Sep 24 '18 at 19:18

How to make a div max height equal to the screen height?

4 Answers4