absolutely positioned content is not displayed inside angular ui-router ui-view - html

Question

I have here plunkr which shows the issue I am facing.Basically I am trying to do create a scroll bar for middle div element, have all three div's fit inside the page.
This approach works fine if I use it as html page, but when I use it inside ui-view, the content inside '#content-scroll' does not show up, if I remove position:absolute from CSS, it displays, but doesn't display scroll bars.
Basically I just want to know how can I have the content display?
How can this be resolved?
http://plnkr.co/edit/ZkGafJ8cS6VG6lfS9SJY?p=preview
#content-scroll {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
overflow: auto;}
Here is the example of same page that works inside html
http://jsfiddle.net/sA5fD/8/

Answer 1

absolute positioned elements behave according to it's parents.
If we give bottom:0; top:0; to an absolutely positioned element it will select the bottom and top of it's parent. So:
Your previous example it is working since the parent have 100% height.
Inside ui-view it will not work it doesn't have an explicit height to it.
There's more than one solution to this problem. For example I applied a min-height to the parent #content and changed it's display property. I suppose you have #content only used for this scrollbar content. Othewise you have to apply special class to the element.
#content {
display:block;
height:100%;
background:#8f8;
min-height: 90vh;
}
Here's a plunker: http://plnkr.co/edit/5vl0AN3WwtUJmDiNtNdL?p=preview

Answer 2

I guess This would solve your problem.
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;
}