Adding whitespace at the end of a div

[Toby White]

I have a page in two, separately scrolling, columns.

The second column contains a dictionary, with definitions
for terms found in the first column, and I have the page
set up such that when the user mouses over across text in the
first column, the focus of the second column changes so that
the relevant term is shown at the top of the second column.

So far so good.

However - the second column will always move such that the
term of interest is at the top of the second column (which
is what I want) except when it is one of the last few
terms at the end of the dictionary - in which case this
can't happen, since these terms can't go to the top,
because there's no more text at the end of the second column
to go in the rest of the div. (If that makes sense)

Unless, of course, I end the dictionary with two hundred lines
of "<br/>", which is what I'm doing at the moment. This works
fine except that

a) it seems rather inelegant.
and
b) it relies on the user not having a screen higher than 200
lines of text.

So I was wondering if there was any way in css to style an
element such that there is effectively "enough whitespace
at the end of this element to fill the height of this div".
ie, so if I scroll the div all the way to the bottom, then
the end of the text in that div will just be scrolling off
the top.

Any ideas?

--
Dr. Toby White
Dept. of Earth Sciences, Downing Street, Cambridge CB2 3EQ. UK
Email: <to***@cam.ac.uk>

[Barbara de Zoete]

On Tue, 06 Sep 2005 16:19:20 +0100, Toby White <to***@cam.ac.uk> wrote:

I have a page in two, separately scrolling, columns.

URL?
[snip]
So I was wondering if there was any way in css to style an
element such that there is effectively "enough whitespace
at the end of this element to fill the height of this div".
ie, so if I scroll the div all the way to the bottom, then
the end of the text in that div will just be scrolling off
the top.

body: height:100%;
containing div with definitions: padding-bottom:100%;

not tested

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

[Toby White]

"Barbara de Zoete" <b_********@hotmail.com> writes:

On Tue, 06 Sep 2005 16:19:20 +0100, Toby White <to***@cam.ac.uk> wrote:

I have a page in two, separately scrolling, columns.

URL?

Sorry - http://www.uszla.me.uk/siesta/h2o_test.xhtml (there's a bunch
of other broken stuff on the page at the moment, but it
illustrates what I'm trying to do.)

So I was wondering if there was any way in css to style an
element such that there is effectively "enough whitespace
at the end of this element to fill the height of this div".
ie, so if I scroll the div all the way to the bottom, then
the end of the text in that div will just be scrolling off
the top.

body: height:100%;
containing div with definitions: padding-bottom:100%;

not tested

Ah. Thanks, that's what I was looking for. Bizarrely, though,
if I put that in the left hand column, it works correctly; if
I put it in the right hand column, I need to increase the
padding-bottom to 300% to make it work correctly.

If anyone can tell my why, I'd be interested, but since I've
now got it working, I'm not too worried.

Toby

--
Dr. Toby White
Dept. of Earth Sciences, Downing Street, Cambridge CB2 3EQ. UK
Email: <to***@cam.ac.uk>

[kchayka]

Toby White wrote:

I have a page in two, separately scrolling, columns.

http://www.uszla.me.uk/siesta/h2o_test.xhtml (there's a bunch
of other broken stuff on the page at the moment, but it
illustrates what I'm trying to do.)

Ish, that's nasty. 2 horizontal and 2 vertical scrollbars. It boggles my
mind why anyone wants to do such a thing.

I can't even read anything in the too-narrow right column, plus it's
unusable for those of us who use keyboard navigation. Scrolling divs
suck. :(

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.