CSS stretch elements to fit container height

Question

Demo - how to stretch li elements to parent container height, so they fit all in ul with appropriate height? I need smth like that:

expected result

Does it have to be a css only solution or can js/jquery be used? — boz, Oct 11 '12 at 10:58

score 1 · Accepted Answer · answered Oct 11 '12 at 10:58

1

ul { display: table;}
li { display: table-row;}

answered Oct 11 '12 at 10:58

Caelea

could you please edit http://jsfiddle.net/zP97v/ to demonstrate how it works with your solution regarding to provided example. Thanks! – Alex Ivasyuv Oct 11 '12 at 11:01
Thanks, almost as should be. But, changing width for ul make effect for li also, and second - margin doesn't works for li – Alex Ivasyuv Oct 11 '12 at 11:05
How margin doesn't work for li? I did not entirely changed the width for ul, that is a min-width. – Caelea Oct 11 '12 at 11:08
@AlexIvasyuv can you tell me the context in witch you wish to use this list, so I can find a solution and help you furthermore? A printscreen will work. – Caelea Oct 11 '12 at 14:20
This only seems to work if a fixed height is given to the UL. – ᴍᴀᴛᴛ ʙᴀᴋᴇʀ Dec 16 '14 at 11:39

score 0 · Answer 2 · answered Oct 11 '12 at 11:01

0

Include one line inside the block of stylesheets for li

height: 25%;

answered Oct 11 '12 at 11:01

RAM

2 Answers2