Do you have a question? Post it now! No Registration Necessary. Now with pictures!
- Nik Coughlin
June 30, 2008, 4:22 am
rate this thread
positioned child element within it and give the child values for both top
and bottom the child will have zero height (expected behavior is has same
height as parent less top + bottom):
How to reproduce:
Create a block element with position relative. Let's call it grandparent.
Put some text in it so that it has non-zero height
Create a block element inside grandparent with position absolute. Let's
call it parent.
Set parent to have top: 0; bottom: 0; left: 0; right: 0;*
Create a block element inside parent with position absolute. Let's call it
Set child to have top: 0; bottom: 0; width: 1em; border: 1px dotted red;
In Opera 9.5 child has zero height. In all other browsers tested** child
has the same height as parent less top + bottom, which in this case as top
and bottom are 0 means the same height as parent.
*or width: 100%; height: 100%; or probably anything else for that matter
**IE7, IE8, FF2, FF3, Safari, Opera 9.27