Forum Moderators: open

Message Too Old, No Replies

Sizable List

         

Yoeri

12:15 pm on Dec 22, 2004 (gmt 0)

10+ Year Member



I have a few problems creating the following list:

+--------+
¦ Title ¦
+--------+
¦ Header ¦
+--------+ --
¦ Item 1 ¦
¦ Item 2 ¦ Actual content (scrollable)
¦ Item 3 ¦
¦ Item 4 ¦
+--------+ --

The list itself is 70% of the height of the body. It has a title, a header and some list items.
The div which holds the items has overflow: auto.

My problem is that the items-div must fill the surrounding div. If I set the height to 100% of the items-div, I get a total height of 70% + Title height + Header height. I don' want that.

Can anybody help me out on this one?

ps. It is possible that other elements precede the title. All of these elements have a fixed height.

tedster

8:24 pm on Dec 22, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Sorry, I'm having some trouble understanding the question - how many divs are there, and what bits does each one contain?

Yoeri

8:07 am on Dec 23, 2004 (gmt 0)

10+ Year Member



Sorry, let me rephrase it:

Current Situation
-----------------
- The height of the container-div is 70%.
- The height of the H2 and listhead are both 20px.
- The height of the list-div to 100% (full height of the container div)

This means that the total height of the list will be 70% + 20px + 20px.

HTML:
-----
<div class="container">
<h2>This is the title</h2>
<div class="listhead">[Header of the list]</listhead>
<div class="list">
[ ListItems ]
</div>
</div>

What I want
-----------
- The list-div must be scrollable.
- The total height must be 70% and not 70% + 20 + 20
- The list-div must fill the remaining space of the container