Hello,
li {
height: 300px;
width: 300px;
}
p {
position:relative;
width: 200px;
height:100%;
float: left;
}
<li>
<p>Hello</p>
</li>
That’s pretty much a scenario I have (in the real world, there are more elements inside the <li>).
How do I get the <p> to be the same height as its parent <li>? I thought height: 100% would do it.
Your logic is a little flawed
If the list element is 300px high then it can never be any bigger than that that no matter the size of it’s inner content.
You can set the inner p element to be 100% high (only when the parent has a set height and not a height dictated by its content) which means it will be 300px high the same as the parent height and that also means it can never be taller than 300px.
It seems like you should use min-height:300px on both elements instead (not supported in IE6).
However we would probably need to see exactly what you wre trying to achieve. 100% height is a tricky subject and does not work in the way that you would expect.
Hello Ralph
I want the <p>
a) to vertically fill the whole space of its container if container is higher AND
b) push it if ever it were higher.
So what are you really trying to achieve? Sounds like you should remove all heights and positioning and just let the p expand to the height it needs to, which will push open the LI. Perhaps set a min-height on the p if necessary.
The problem, I guess is with the float.
if I do:
p {
position: absolute;
top:0;
left:0;
height: 100%;
}
Then the <p> fills the whole height. The issue with absolute positionning, obviously, is that if the content of <p> makes it higher than its <li> container, it is no longer pushing the boundaries of the <li> container.
If the <p> is just a single line, you could use line-height: 300px;
EDIT:
Actually, it’s probably just the default margins on the <p> that are bothering you, so you could try this instead:
li p {margin: 0;}