Forum Moderators: open
+--------+
¦ 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.
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