Question

我有一个我正在构建的应用程序，它具有基本布局，页面标题，侧边栏和主要内容区域。我正在使用Angular Material（1.0.5）和Angular.js（1.5.0）。我正在为我的应用程序的布局使用Angular Material的flexbox布局指令。

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

我已经整理了CodePen来重现我遇到的问题。这使得我的布局与我的应用程序目前的布局非常相似。

Answer 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

使用Angular Material + Flex使元素具有相同的高度

1 个答案:

结果：