绝对定位的内容不会显示在角度 ui-router ui-view 中

Question

我在这里有 plunkr，它显示了我面临的问题。基本上我正在尝试为中间 div 元素创建一个滚动条，让所有三个 div 都适合页面。

如果我将它用作 html 页面，这种方法效果很好，但是当我在 ui-view 中使用它时，'#content-scroll' 内的内容不会显示，如果我从 CSS 中删除 position:absolute，它会显示，但不显示滚动条。

基本上我只想知道如何显示内容？

如何解决？

http://plnkr.co/edit/ZkGafJ8cS6VG6lfS9SJY?p=preview

#content-scroll {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
overflow: auto;}

这是在 html 中工作的同一页面的示例

http://jsfiddle.net/sA5fD/8/

Answer 1

absolute 定位元素的行为与其父元素一致。

如果我们将bottom:0; top:0; 赋予绝对定位元素，它将选择其父元素的bottom 和top。所以：

1. 您之前的示例正在运行，因为父级具有 100% 的高度。
2. 在ui-view 内部它不会工作，它没有明确的height。

解决这个问题的方法不止一种。例如，我将min-height 应用于父#content 并更改了它的显示属性。我想您有 #content 仅用于此滚动条内容。否则你必须对元素应用特殊的类。

#content {
  display:block;
  height:100%;
  background:#8f8;
  min-height: 90vh;
}

这是一个笨蛋：http://plnkr.co/edit/5vl0AN3WwtUJmDiNtNdL?p=preview

Answer 2

我想这会解决你的问题。

 html { height: 100%; }
    body {      
        padding:0 0;
        margin:0 0;
        height: 100%;
    }
    #main {
        display:table;
        height:100%;
        width:100%;
    }
    #header, #footer {
        display:table-row;
        background:#88f;
        left:0;
        right:0;
    }

    #content {
        display:table-cell;
        height:100vh;

        background:#8f8;
    }

    #content-scroll-wrap {
        position: relative;
        height: 100%;
    }
    #content-scroll {
        position: absolute;
        top: 0; bottom: 0;
        left: 0; right: 0;
    overflow: auto;
}