HTML Scroll Box Problem

Scroll box contents occupy space below the box.

[Blitzenspeicher]

Though the scroll box works as it should, the contents also take up vertical space below my intended page, pushing the bottom of the page down below any contents on the page, leaving a big empty space.

Here is the core HTML, CSS for the page. What needs to change?


<!-- Start of scroll table -->

<table cellpadding="0px" cellspacing="0px" border="0px" style="width: 300px;font-family:arial;font-size:14px;scrollbar-track-color:#404040;scrollbar-face-color:#a0907c;background-image:url(yelbak.png);background-repeat:repeat;color:#000000;">
<tr>
<td>
<img src=".jpg" width="0px" height="0px" border="0px" align="center">
</td>
</tr>
<tr>
<td style="padding-left:6px;">
<div style="overflow:auto;height: 660px;width:300px;">

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

</div>
</td>
<td></td>
</tr>
</table>

<!-- End of scroll table -->

[desertridgedesigns]

What are you trying to do here ? Scroll it up an down ?

[lucy24]

Though the scroll box works as it should, the contents also take up vertical space below my intended page, pushing the bottom of the page down below any contents on the page, leaving a big empty space.

It's browser-specific. The body will always be as wide as your viewport. But the height will be either the height of the viewport or the height of the contents.

body {border: 1px solid red;}
table {border: 1px solid blue;}

Comment-out the table, leaving only the empty body and maybe an &nbsp; or so, and you can see what different browsers make of it. On my system, webkit fills the vertical space; the others (mozilla & opera) stop when the content runs out.

Incidentally, ahem

::cough-cough::

you could have pasted-in that paragraph ONCE, with note to make a bunch of copies of it.