css - 使 div 子级在 100% 高度父级 div 内可滚动

Question

我试图为这个看似简单的问题找到解决方案，但没有成功。我正在使用 AngularJS 和 Angular Material。

index.html

<div class="parent" layout="column" layout-fill ng-view>
</div>

示例 HTML 模板:

<div class="child" layout="column" layout-fill>
    <div flex="20">
        Some content
    </div>
    <div flex>
        Some more content
    </div>
</div>

(parent 和child CSS 类中没有任何内容，这里仅用作名称引用)

如果内容短于屏幕高度，我希望父子 div 都是全高，内容 div 根据 flex 属性扩展。来自 Angular Material 的 layout-fill 指令添加了 100% 的高度，因此目前可以正常工作。

如果内容长于屏幕高度可以显示的内容，我希望子 div 可以滚动。

我的想法是使用媒体查询将类属性附加到子 div，以防高度低于 400 像素。

@media screen and (max-height: 400px){
.child{
        height: 400px;
        overflow-y: scroll;
    }
}

不幸的是，这不起作用。子高度与父高度(屏幕高度)相同。检查元素(Chrome)时，它说 css 高度为 400px，但计算出的高度不是。

我真的不明白。

JSFiddle

有什么想法吗？

Answer 1

我会将媒体查询中的设置更改为

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

这会强制它与其内容一样高且至少 400 像素，这将在正文中滚动。

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