<html>
<head>
</head>
<body>
<style>
body
{
margin: 0;
padding: 0;
}
.TOP_TOOLBAR,
.BOTTOM_TOOLBAR {
height: 50px; width: 100%; position: fixed;background: #ccc;z-index: 10;
}
.TOP_TOOLBAR {
top: 0;
}
.BOTTOM_TOOLBAR {
bottom: 0;
}
.SCROLLER_FRAME {
width: 100%; position: absolute; top: 50px; bottom: 50px;
}
</style>
<div class="TOP_TOOLBAR">
... toolbar content ...
</div>
<div class="SCROLLER_FRAME">
<div class="SCROLLER">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin molestie augue vel venenatis. Maecenas sit amet dui vitae odio posuere tempus eu eu ante. Mauris scelerisque sagittis iaculis. Praesent posuere id sem vel iaculis. Praesent mollis feugiat mauris. Integer consectetur dui nibh, in hendrerit est fermentum quis. Nunc porttitor diam sit amet nisl convallis molestie. Pellentesque ligula odio, feugiat eget pellentesque ut, varius ut ligula.</p>
<p>Sed aliquam, nisi quis condimentum accumsan, quam neque varius massa, et aliquam dui diam vitae erat. Nullam commodo blandit sollicitudin. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vestibulum leo urna, et adipiscing leo porttitor vitae. Nam ultrices rutrum orci, eget ultricies elit tempus a. Etiam pellentesque tellus sodales fermentum sodales. Vivamus ipsum arcu, tincidunt et quam sit amet, aliquet sollicitudin risus.</p>
<p>Phasellus id fermentum nibh. Donec lacus nisi, placerat at tortor dignissim, imperdiet consectetur odio. Praesent id eros diam. Curabitur felis enim, porta nec faucibus et, rhoncus vel turpis. Quisque eu orci posuere, mattis purus vel, iaculis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam semper luctus nulla gravida congue. Nullam rhoncus gravida arcu, at cursus urna porttitor ut. Fusce vehicula malesuada metus, non placerat velit. Nullam ut justo dui. Aenean eget erat eu purus vestibulum blandit. Donec viverra dictum tellus sed congue. In iaculis egestas pharetra. Nulla sollicitudin, justo ut congue elementum, lorem mauris ultrices turpis, non tincidunt leo libero quis lorem.</p>
<p>Donec eu euismod ligula. Vestibulum nec ornare urna. Aenean tempor ligula nisi, vitae iaculis felis pretium a. Suspendisse sollicitudin ac purus eu consequat. Fusce elementum rhoncus gravida. Nullam gravida, est eget vehicula condimentum, mauris quam laoreet libero, ac convallis nulla quam ac velit. Nunc a aliquet enim. Praesent volutpat, massa ultricies adipiscing porta, lectus urna molestie orci, vel aliquam tellus nibh sit amet justo. Donec venenatis sed augue id varius. Ut bibendum nunc ut nisl venenatis, nec varius dui commodo. Praesent urna mi, sagittis vel congue ac, dapibus at urna. Maecenas auctor tortor dapibus leo laoreet vestibulum.</p>
<p>Pellentesque sit amet suscipit ante. Nullam nec urna in arcu faucibus cursus pharetra sit amet lacus. Quisque eu bibendum diam, eget suscipit leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper, nulla vel egestas interdum, mauris dui pretium lectus, et gravida dolor sapien vel risus. Aenean id ante interdum augue tristique cursus ut eu magna. Ut nisi elit, sollicitudin in justo vitae, facilisis commodo magna. Integer suscipit, lectus sed aliquam iaculis, erat lacus lacinia ipsum, ut rhoncus sem neque ac tellus. Sed sit amet varius velit. Curabitur sit amet tellus luctus, consectetur lacus et, pharetra tellus. Morbi leo lorem, condimentum in justo non, volutpat ornare quam.</p>
</div>
</div>
<div class="BOTTOM_TOOLBAR">
... toolbar content ...
</div>
</body>
これは私にとってはうまくいきました、私が変更したのは位置だけですfixed