css - 2 div with fixed and liquid height in absolute positioned div -

http://jsfiddle.net/u0398kc1/2/

html

<div class="infopanel">     <div class="header">header</div>     <div class="content">         start<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>c<br/>end<br/>     </div> </div> 

css

.infopanel  {     height: 100%;     overflow: hidden;     position: absolute;     top: 0;     left: 0;     width: 300px; }  .header  {     height:30px; line-height:30px;     background:#c1c1c1; }  .content  {     overflow:auto; height:100%;     background:#f1f1f1; } 

"header" div fixed height moving "content" div dont see "end" string. solution without js?

1 solution make both header , content div liquid height, example 10% , 90%. in case unsuitable.

you can use css3 calc function:

.content  {     overflow:auto;      height: calc(100% - 30px);     background:#f1f1f1; } 

for older browser support should include:

/* firefox */ height: -moz-calc(100% - 30px); /* webkit */ height: -webkit-calc(100% - 30px); /* opera */ height: -o-calc(100% - 30px);