<html> 
    <head> 
        <style type='text/css'>
            .container {
                position: absolute;
                top: 30px;
                bottom: 30px;
                width: 300px;
                background: yellow;
                border: 2px dashed black;
            }
            .test {                
                height: 50%;
                background: blue;
                border: 2px dashed black;
            }
        </style>
    </head>
    <body>
        <p>The inner blue box should be 50% as tall as the outer yellow box.</p>
        <div class="container">
            <div class="test"></div>
        </div>
    </body>
</html>