I've built tons of divs to where there is a parent that acts as a wrapper and one of the child elements would size to a portion of the parent and then scroll for overflow, but cannot get this specific one right for some reason.I've got a parent container - > 1st child is a header - > 2nd child contains content and is sized to fill the parent - the header.I've got the parent positioned absolute and appended to the document.body so that it can fill the entire screen minus a little width and height.When I size my content element to scroll if exceeds the given height the behavior is as if it has no parent at all, not even the document.body. The width works perfectly; however, the undesired behavior is only happening for setting the height as a percentage, it works if setting in pixels. But this specific situation I need to set the height in percentage due to filling the entire screen and people have so many different types of screens with different pixels settings.The blueprintsViewer div sizes correctly.The printContainer div overflows the blueprintsViewer and past the screen height. The behavior is the same as if i did not correctly set it's position or it's parent position.\[code\]<div id="blueprintsViewer" style="max-width: 98.75%; max-height: 98%;"> <div class=" blueprintsHead"><span class=" rndClose" title="Close"></span><a class=" acLink" title="Append door schedule">Door schedule</a></div> <div class=" printContainer" style="max-height: 75%;"><img src="http://stackoverflow.com/api/drawings a=e&id=4309"><img src="http://stackoverflow.com/api/drawings?a=d&id=4309"></div></div>\[/code\]--Here is the .css styling\[code\] #blueprintsViewer { position: absolute; top: 5px; left: 10px; padding: 10px; height:auto; overflow:visible; background-color: rgba(45, 45, 45, 0.65); border-radius: 5px; -moz-border-radius: 5px; z-index: 20001; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-box-shadow: 0 4px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.5); -moz-box-shadow: 0 4px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.5); box-shadow: 0 4px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.5);} .blueprintsHead { width: 100%; height: 40px; position:relative; /*cursor: move;*/ padding: 2px; background-color: #fff; border-bottom: 2px groove #39c; background-image: url(in25.png); background-repeat: no-repeat; background-position: 5px center; text-align: right; border-top-right-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topleft: 3px; } .blueprintsHead > a { text-decoration: underline; margin-right: 4em; margin-top: 1em; padding: .2em; display:block; width:80px; } .blueprintsHead >span.rndClose {zoom:1.4 !important; top:5px;right:5px;} #blueprintsViewer img { margin-bottom:10px; } #blueprintsViewer .printContainer { position: relative; margin: 5px; margin-left:-1px; width: 100%; overflow:scroll; }\[/code\]--Here is a screen snap shot.In the screen shot below the darker background is the parent "div#blueprintsViewer" and the div.printContainer is overflowing the div#blueprintsViewer, and this is the behavior I want to overcome.
