html - How can I get height: 100% to account for existing pixel-heighted elements within the same div? -

i have container defined height containing 2 divs, first has pixel-defined height , second fill remaining space of container, i.e. 100% minus first div's pixel-defined height.

is there solution problem doesn't involve javascript? can use javascript solution (and in fact javascript changing container's height brought me here), seems should have lower-level support, , looks might become quite cascading problem.

example

http://jsfiddle.net/h3gsz/1/

html

<div id="container">     <div id="top_content"></div>     <div id="remaining_content"></div> </div> 

css

#container {     width: 400px;     height: 400px;     border: 5px solid black; } #top_content {     background-color: blue;     width: 100%;     height: 50px; } #remaining_content {     background-color: red;     width: 100%;     height: 100%; } 

edit

an answer provided original fiddle, in simplifying question allowed answer introduce new problems: http://jsfiddle.net/h3gsz/6/

i had removed inline-block styling , max-width value. given absolute positioning of remaining content, container's width no longer defined said content (from inline-block), horizontal scrollbar introduced there shouldn't one.

i'm not sure if should make new question or not.

#container {     width: 400px;     height: 400px;     border: 5px solid black;     position: relative; } #top_content {     background-color: blue;     width: 100%;     height: 50px; } #remaining_content {     background-color: red;     width: 100%;     top: 50px;     bottom: 0;     position: absolute; } 

http://jsfiddle.net/h3gsz/4/