There is a main block with a specified height in pixels. There are 3 indoor units:
- top - should scale by content and compress the middle block
- middle - must be with a scrollbar appearing (if there is not enough space for content)
- buttom - fixed pixel height
How to make the main block NOT stretch , but remain the same height, at the same time the top block squeeze the middle block with its contents ?
#main{ height:200px !important; width:100px; background:blue; } #top{ background:green; } #middle{ background:red; height:100%; overflow: auto; } #buttom{ background:blue; height:50px; bottom:0 } <div id="main"> <div id="top">ะขะตะบัั ัะตะบัั ัะตะบัั ัะตะบัั ัะตะบัั ัะตะบัั ัะตะบัั ัะตะบัั ัะตะบัั ัะตะบัั ัะตะบัั</div> <div id="middle">ะขะตะบัั ัะตะบัั ัะตะบัั ะขะตะบัั ัะตะบัั ัะตะบัั ะขะตะบัั ัะตะบัั ัะตะบัั ะขะตะบัั ัะตะบัั ัะตะบัั ะขะตะบัั ัะตะบัั ัะตะบัั ะขะตะบัั ัะตะบัั ัะตะบัั ะขะตะบัั ัะตะบัั ัะตะบัั ะขะตะบัั ัะตะบัั ัะตะบัั </div> <div id="buttom">ะขะตะบัั ัะตะบัั ัะตะบัั</div> </div> Any suggestions on how to do this? http://jsfiddle.net/5fCcy/3/
