Thanks for the detailed clarification, Paul. Great post. I’ve updated the Pen above to reflect your suggestions. 
In my experience, there are only 2 times height 100% is actually useful for anything;
- Inside an element with display:table-cell
- Inside an element that has position:relative, position:absolute, or position:fixed
Let’s say you have this HTML:
[div class=“outer-parent”]
[div class=“parent”]
[div class=“child”] test [/div]
[/div]
[/div]
(Yes they are the wrong sort of bracket, the pointy ones wouldn’t display)
You can do this with the CSS:
/* option 1*/
.outer-parent { display:table; }
.parent { display:table-cell; }
.child { display: inline-block; height:100%}
/* option 2 */
.parent { position: relative; }
.child { position: absolute; height: 100%; }
Off Topic:
You need to use Markdown to display HTML code as such. Forum Posting Basics - #6 by James_Hibbard explains how.
I’m not being picky here (as this is a complicated subject) but for further clarification 
height:100% inside a table cell will only work if the parent has a height defined (as mentioned in my previous post) and that parent’s height is not a percentage (unless there is an unbroken change back to root (see caveat for tables below)).
Essentially a table-cell is always 100% high as it will match other cells height automatically so the only time you need height:100% on a table-cell is when you have a nested element and you want that nested element to stretch the full height of the cell in order to match the height of other cells in that row.
In order to do this in a cross browser way you would need to give the parent table element a fixed height (height:1px will suffice as height is a minimum on tables). height:100% on the table will work in some browsers and not others unless there’s is a full chain of 100% back to root (and in which case you get a table stretching from top to bottom of the viewport which may not be what you wanted).
This will not work unless there is an unbroken chain of height:100% back to root or back to a table element with a height defined.
Your final comment about absolute elements is correct though and an absolute element will always base its height on a relative parent and keep track. (It would be of limited use though (although there are special cases) for placing content in the absolute element as in most cases the parent would have no height unless other non positioned content was present).
I only used the table cell height:100% thing for the first time just recently when the position:relative position:absolute height:100% combo wasn’t working on a div inside a table cell.
I was going off memory so I might have missed bits but I’m pretty sure I didn’t have to set a height value on the table.
There’s loads of things you can do with position absolute! Especially if you combine it with :before and/or :after pseudo elements.
You just need to be a little clever.
You can do things like:
- create custom dot points for list items
- create custom check box and radio buttons
- vertically center align an element that has a fixed height
- create box shadows that only go in one direction (clue: it’s not actually a box shadow, it’s a gradient in a pseudo element)
- create file type icons next to download links
- add tool tips to links
I LOVE position absolute 
Sorry. Going off topic. All of that is more advanced sort of stuff. For beginners, position:absolute is pretty dangerous. 
Try it and see I can assure you you will need the format I posted above for a cross browser solution.
Yes of course.
I was just pointing out the pitfalls of tracking relative content. I have used position:absolute for all the things you mentioned and its a very useful tool in the toolbox when used in the right places. Indeed about 10 years ago I used it for my absolute overlay technique for faux columns.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.