بدون استفاده از جاوا اسکریپت و تنها CSS:
شما می توانید یک div به عنوان wrapper بر روی دو div دیگر تعریف نمایید، سپس به وسیله CSS بگویید که همواره div های فرزند تمام ارتفاع div پدر را پر کند:
CSS:
#mainContent {
overflow: hidden;
position: relative;
width: 100%;
}
#sidebar {
background:yellow;
float:right;
width:25%;
height:100%;
position: absolute;
right: 0;
}
#containbody {
background:green;
float:left;
height:300px;
width:75%;
height:100%;
}
#footer {
clear:both;
}
HTML:
<body>
<div id="container">
<div id="header">head</div>
<div id='mainContent'>
<div id="sidebar">side</div>
<div id="containbody">
<div id="body">body
<br/>
Test Line1
<br/>
Test Line2
<br/>
Test Line2</div>
</div>
</div>
<div id="footer">foot</div>
</div>
</body>
JSFiddle
