Height: 100%; goes out of window.

[rain13]

Hello.

 

 

I am making a window with title bar and content. I want to make #wincontent to fill whole window, so I use height: 100%; but it doesn't take into account that #titlebar already uses some of available space. How do I tell it to be 100% - height of title bar? If possible I would prefer to do it with out JavaScript.

<div class="ui-draggable ui-resizable" id="win" style="border: 1px solid rgb(48, 124, 153); position: fixed; left: 746px; top: 24px; width: 712px; height: 150px; background: rgb(219, 237, 255) none repeat scroll 0% 0%; right: auto; bottom: auto;"><div class="ui-draggable-handle" style="background:#9CF" id="titlebar">my window</div><div id="wincontent" style="height: 100%; width: 100%; overflow: auto;"><h2 style="color: #000;">fgdfsdg</h2><style>table .sortable{    border-top: 1px solid black;    border-right: 1px solid black;}</style>gfdhgfhgf<br>dgfhgf<br>dfhgfh<br>fdghg<br>dfghgfdh<br>fgdhggfh<br>gfhgf<br><br></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-e"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-s"></div><div style="z-index: 90;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div></div>

Edited July 24, 2015 by SoItBegins

[dsonesuk]

Place the title in the content window?

[COBOLdinosaur]

Just give the content a height using calc and vh:

 

height:calc(100vh - 150px);

Some older version of Chrome still choke on the vh in a calc so you might need to use a percentage instead:

 

height:calc(100% - 150px);

 

more about calc and vh on my site

 

BTW it is really bad practice to put styling linline like that. It will create all sorts of maintenance problems for you.