Hey Folks,

I'm trying to get 100% height to work on a specific list element but it's not working for me. I have the html and body tags set as min-height: 100% so I was thinking I should be able to just set the id on the LI to min-height: 100% but it's not working for me.

Any ideas?

If you take a look at my test site the middle column has a trailing LI which I want to stretch to the bottom.

Thanks or your help!

  • could you give a screenshot of what you want to achieve and what you have right now? Divya Manian about 7 years ago

2 answers

1
point
This was chosen as the best answer

It can't work, because #column-2 is floated and floated elements don't inherit height. You will observe this if you look at the computed styles in a dom inspector.

For some headache-inducing reference, check the css 2.1 rules for computing height

Answered about 7 years ago by Richard Grevers
3
points

the height is related to the parent - so a 100% high li, can only be as high as the ul that contains it.

you might have to set 100% high on the ul and its container too.

might a background image be just as effective if all you need is a faux column?

Answered about 7 years ago by Tony Crockford
  • Thanks for your answer. I've added 100% heights to all the containing elements but it's still not working for me. Any other tips? Paul Sheldrake about 7 years ago
  • why do you want 100% high? if it's purely visual, then there are other ways. Tony Crockford about 7 years ago