Question

我很难说出以下布局有什么问题。

我试图用＆＃34;最深的＆＃34;来保持SPA布局。如果VH太小（在overflow-y:scroll和border: 3px solid black的代码段中标记），则组件只能滚动，无论如何，父div应该遵循视口边界。

http://codepen.io/minikrob/pen/yJKzKj
示例：http://i.imgur.com/zq0tbx5.png

有没有人知道如何实现这个目标？

编辑：这是旧版Google Chrome的问题...再次感谢@kuhnroyal＆amp; @Chanthu！

Answer 1

如果带有黑色边框的内部容器是您想要滚动的内容，请查看：http://codepen.io/anon/pen/Wxzkmr

修复方法是将height:100%;添加到元素.pusher和#content-wrapper。

如何解决这个问题？嗯... css很奇怪。

Answer 2

您应该在父项上使用angular-material layout="column|row，在md-content上使用可滚动元素。

<div flex="" class="maincontent pushable" layout="column">
  <div flex="" class="pusher" layout="column">
    <!-- ngView: content-wrapper -->
    <md-content id="content-wrapper" flex="">

这是一支工作笔：http://codepen.io/kuhnroyal/pen/QEmOvk

您应该阅读https://material.angularjs.org/latest/layout/container

使用角度材料速记的嵌套弹性布局问题

2 个答案: