css - 如何使 div 最大高度等于屏幕高度？

Question

查看 Trello 的屏幕截图：

他们如何设法使“小部件”达到屏幕高度的最大值？如果它太高，滚动它？

我试过max-height: 100%了，但这不起作用。

这里有一个完整的代码（它不像我预期的那样工作）：http: //jsfiddle.net/3erc7f0L/

标签： css

Answer 1

如果您想实现类似 trello 的功能，您的卡片需要具有特定的高度。

然后对于页眉和页脚内容也给它一些所需的高度。

对于您要滚动的内部内容，应为父级减去 100% 的高度（页眉高度 + 页脚高度）。为此，您可以使用 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>