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>

（父和子 CSS类中没有任何内容，仅用于此处的名称参考）

如果内容短于屏幕高度，我希望父和子div都是全高，内容div根据flex属性展开。 Angular Material的 layout-fill 指令增加了100％的高度，因此目前正在使用。

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

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

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

这迫使它与其内容一样高，至少400px，这将在体内滚动。

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

使div子项在100％高度父div

1 个答案: