Css 如何使div max height等于屏幕高度？

请参见Trello的屏幕截图：

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

我尝试了

max height:100%

，但这不起作用

---

这里有一个完整的代码（它不像我预期的那样工作）：

您可以设置

最大高度：100vh

，将其限制为视口高度的100%

---

还有相应的宽度单位：

vw

如果要实现trello-like功能，您的卡需要具有特定的高度

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

对于要滚动的内部内容，其高度应为父级的100%（页眉高度+页脚高度）。为此，您可以使用calc

.ss{
高度：150px；/*为主容器提供所需的高度*/
宽度：150px；/*和宽度（如果需要）*/
边框：1px实心#ddd；
}
p、 页眉，页脚{
/*顶部的页眉和底部的页脚应具有固定高度
因此，把所需的高度*/
保证金：0；
高度：30px；
背景：#eee；
}
.卷轴{
/*现在中心部分应该是容器的高度减去容器的高度
页眉和页脚组合*/
填充：10px；
高度：计算（100%-60px）；
溢出y：自动；/*在y轴上添加溢出，以便添加滚动条*/
}

标题
sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

sfddsfds

页脚

这是一个适用于非固定高度的解决方案

此方法基于

2018年9月的Flexbox支持：95.71%（前缀属性）

正文{
保证金：0；
高度：100vh；
}
主要{
最大高度：100%；
显示器：flex；
弯曲方向：立柱；
}
标题，
页脚{
填充：1em；
背景：浅蓝色；
}
.内容{
柔性生长：1；
溢出：自动；
背景：rgba（0,0,0,0.1）；
}

标题

一,
二,
三,
四,
五,
六,
七,
八,
九,
十,
十一,
十二,
十三,
十四,
十五
十六,
十七,
十八
十九,
二十

页脚

我的朋友提供的完整解决方案：

---

max height:100vh

-见见你的新好友，

vh

和

vw

…100%什么？首先在css中问问自己，父母定义了什么，为了继续下去，你可以使用什么。因此，当您查看代码时，请扪心自问。从何处，它将获得100%？用

max height:100vh

替换

max height:100%

的可能重复不会使JSFIDLE上的代码示例根据需要工作。因此，据我所知，您的答案是不正确的，它执行您要求它执行的操作-具有最大高度的容器div是可滚动的，因为内容不适合框架。但是，如果希望内容在div之外不可见，则需要使用

溢出：none

还请注意

max height

是最大高度。它不会使小于

最大高度的装置变大。为此，您需要使用
高度
或
最小高度
。
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;
}