CODEWITHSUNDEEP
css
porton
porton

Reputation: 5803

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

See a screenshot from Trello:

Trello screenshot

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/

Upvotes: 0

Views: 20809

Answers (4)

Quentin
Quentin

Reputation: 3289

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

Upvotes: 1

porton
porton

Reputation: 5803

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;
}

Upvotes: 0

Kumar
Kumar

Reputation: 3126

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>

Upvotes: 1

Bricky
Bricky

Reputation: 2745

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

Upvotes: -1

Related Questions