Вот jsbin, чтобы помочь вам начать:
http://jsbin.com/exevi3/edit
Надеюсь, это поможет.Обратите внимание, что в примере используется CSS для разметки вместо таблиц.Это рекомендуемая лучшая практика в наши дни.
Боб
Вот jQuery:
$(document).ready(function(){
setHeight();
$(window).resize(function(){
setHeight();
});
function setHeight(){
var headHeight = $("#header").height();
var docHeight = $(window).height();
var h = docHeight - headHeight - 50;
$("#menu").css('height', h + 'px');
$("#content").css('height', h + 'px');
}
});
Значение '50' там, потому что есть некоторые дополнительные отступы, неучитывается.Может быть, я должен использовать innerHeight ().
Вот HTML:
<body>
<div id="header">
header
</div>
<div id="body">
<div id="menu">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum aliquam diam, et facilisis lectus auctor vel. Praesent sit amet ante sem, id commodo leo. Praesent eget nisl leo. Quisque vel lectus metus. Morbi pellentesque scelerisque ipsum, eget fermentum sapien molestie et. Vestibulum quis elementum augue. Donec consectetur elit id ligula imperdiet a euismod mi pharetra. Nulla nec sapien et lectus porta sodales. Aliquam sed egestas justo. Integer adipiscing, felis non vehicula commodo, leo tellus aliquam nulla, et cursus nibh felis ac risus. Duis sit amet tempor lectus.</p>
<p>Ut mauris tellus, auctor ut mollis vitae, malesuada at nunc. Aenean condimentum ullamcorper viverra. Etiam elementum erat eget nulla bibendum a faucibus purus feugiat. Nam enim eros, placerat vitae volutpat tincidunt, tristique ac lectus. Proin elit risus, eleifend non varius eget, pretium non lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla blandit lacus blandit nisl porttitor eleifend. Sed adipiscing, leo nec pellentesque tempus, tellus velit pulvinar turpis, euismod pulvinar est odio et elit. Etiam quis turpis a tortor condimentum convallis eu nec velit. Nullam volutpat luctus nisi, in sollicitudin lectus adipiscing vitae. Pellentesque eu neque ut nisl iaculis lacinia nec non odio. Ut id nibh nec leo vulputate malesuada at sit amet risus. Mauris elementum dolor eget ligula pharetra vestibulum. In eu enim eu dui interdum vestibulum.</p>
<p>Ut quis libero et neque lobortis tempus. Quisque adipiscing eleifend lacus, iaculis adipiscing nibh porttitor ut. Sed dapibus nisl quis mauris sagittis blandit. Donec a tellus non ipsum mollis pretium. Morbi non lectus ut purus porttitor auctor. Praesent vulputate dictum augue nec elementum. Nulla facilisi. Duis auctor, metus molestie egestas pellentesque, sem nulla fringilla risus, a ultrices nunc sem ut eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id neque volutpat nisl sollicitudin vestibulum auctor quis ligula.</p>
<p>Sed eget bibendum nisl. Ut nec odio massa, vitae posuere sem. Pellentesque vel urna sit amet sem gravida dignissim id vitae magna. Mauris aliquam, sapien pharetra malesuada bibendum, nisi metus auctor velit, eu egestas felis metus nec tellus. Morbi elementum pellentesque leo, eget facilisis nunc dictum sit amet. Integer cursus venenatis velit, a laoreet mi aliquet ut. Morbi nisi erat, tristique a porta vitae, hendrerit vel neque. Ut ipsum turpis, lobortis quis congue a, sagittis ut nulla. Donec massa sapien, consectetur facilisis lobortis in, aliquam at justo. Duis feugiat lacus sed sapien condimentum sollicitudin laoreet arcu semper. Phasellus sit amet odio at enim tincidunt congue. Ut ac ante eget eros facilisis faucibus non at mauris.</p>
<p>Vivamus ultrices dui eu nisi tempus semper. Suspendisse consectetur orci non lectus vestibulum dictum. Sed sodales diam vel magna scelerisque quis lobortis ipsum condimentum. Etiam sem orci, bibendum eget sagittis et, ullamcorper at nibh. In sed dignissim dolor. Aliquam erat volutpat. Curabitur vel euismod augue. Integer pulvinar ultrices velit, iaculis tincidunt est scelerisque sed. Integer non vehicula est. Cras pretium viverra augue, in accumsan ante dictum vehicula. Nulla facilisi. In imperdiet pretium tortor, eget vehicula tellus porttitor vel. Praesent erat erat, commodo ac euismod non, tempor sed sem. Fusce non elit nec velit consequat cursus. Phasellus placerat luctus erat, vitae porta sem pulvinar a. Mauris hendrerit neque vitae elit commodo convallis. In ac risus elit, non aliquam tellus.</p>
</div>
</div>
</body>
И, наконец, CSS:
#header{
height: 120px;
background-color: #000;
color: #fff;
}
#menu{
width: 300px;
height: 400px;
overflow-y: scroll;
float: left;
background-color: #ffdddd;
}
#content{
height: 400px;
overflow-y: scroll;
}
Извините, эти ссылки нене работает для вас.Не знаю почему.В любом случае вы должны иметь возможность добавить это на страницу test.html и увидеть решение.