使用 Angular Material + Flex 使元素高度相同答案

【问题标题】：Make elements same height with Angular Material + Flex使用 Angular Material + Flex 使元素高度相同
【发布时间】：2016-08-22 13:06:42
【问题描述】：

我正在构建一个应用程序，该应用程序具有基本布局，包括页眉、侧边栏和主要内容区域。我将 Angular Material (1.0.5) 与 Angular.js (1.5.0) 一起使用。我正在为我的应用程序布局使用 Angular Material 的 flexbox 布局指令。

我的问题是我正在使用 flex 将侧边栏扩展到页面底部，但是当我在包含许多 ng-repeated 项目的页面上滚动时，它会保持窗口的高度。我希望它一直延伸到页面本身的底部，就重复的项目而言。我使用 Angular Material 的 flex 指令尝试了几种不同的方法，但这是迄今为止我能做到的最好的方法。我想避免的一个选择是计算在$timeout 中使用JavaScript 所需的高度，但就像我说的那样，这将是我的最后选择。我知道的另一个可用选项是使内容区域可滚动，以便标题和侧边栏始终固定在那里。我会那样做，但客户不喜欢那样做，说不。（因此，不是一种选择）

我整理了一个CodePen 来重现我遇到的问题。这使我的布局与我的应用程序目前的布局几乎相同。

【问题讨论】：

标签： css angularjs flexbox angular-material

【解决方案1】：

首先创建一个包装类并将所有内容插入包装内

.wrapper {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

<body ng-app="my-app" layout="column">
    <div class="wrapper" layout="column">
       ADD ALL YOUR CONTENT HERE
    </div>
</body>

对于您的行/标题不要缩小，将flex-shrink: 0 添加到它们

.header,
.row-item {
    flex-shrink: 0;
}

结果：

http://codepen.io/retamalph/pen/GZYZJo?editors=1100

【讨论】：

假设您的重复项目足以超出您的窗口大小，您的解决方案就可以工作。在你的codepen上，例如将重复项的数量更改为3，并且侧边栏不占用窗口的高度，它只是包装器的高度。
抱歉，没看到。只需将layout="column" 添加到.wrapper div，再次检查笔