How to fill DIV element into td parent?

Question

I have actually a little problem with filling TD tag. I will see 100% height of td setup on div inserted to TD

How to fill any div to 100% of parent height ??

SOLVED

<?php 
`http://jsfiddle.net/s5rbv/`
?>

Working under firefox 26, other browser i don't check because i dont needed

If your reason for stretching is to have a background color on the cell, just put the style on the `` instead. — xec, Dec 16 '13 at 08:31
I am with xec on this, please explain what are you trying to do beside stretch your div! Why are you trying to do this? — I am Cavic, Dec 16 '13 at 08:33
It have to be DIV because TD representive a time of work and DIV (with draggable from UI Jquery) representive meet with patient. — przeqpiciel, Dec 16 '13 at 08:34
Can you look at this and see if it helps you! http://www.reignwaterdesigns.com/ad/tidbits/hacks/minimum_height_in_css.shtml — I am Cavic, Dec 16 '13 at 08:40

Andrew · Answer 1 · 2013-12-16T09:52:21.833

0

For your question: "How to fill any div to 100% of parent height ??" Just set the child's div height to 100% and it will fill the height of the parent element.

childDIv{
    height:100%;
}

Edit With your new info you provided, here is a solution for your problem maybe:

Fiddle: http://jsfiddle.net/s4dDL/4/

HTML

<table>
<tr><td rowspan="2"><div>row 1 and 2</div></td><td>col 2</td><td>col 3</td></tr>
<tr><td>col 2</td><td>col 3</td></tr>
<tr><td>col1</td><td>col 2</td><td>col 3</td></tr>
</table>

CSS

*{margin:0;padding:0;}

table{
    border-collapse:collapse;
}

td{
    position:relative;
    height:100px;
    width:50px;  
    background-color:red;
}

td div {
    position:absolute;
    top:0;
    left:0;
    height:200px;
    z-index:10;
    background-color:green;    
}

You set the div to position absolute and left and top to 0 to set it top left of the td element, but need to set the td to relative for it to work. Then set the height of div to 2x the height of the td element. But for it to appear over top of the second row (rowspan=2), you need to set a z-index.

EDIT

Actually, if you fill the full cell, dont need to use positioning, and it doesnt work on firefox anyways. as pointed out in comments.

here is a working fiddle with update: http://jsfiddle.net/s4dDL/13/

edited Dec 16 '13 at 09:52

answered Dec 16 '13 at 08:30

Andrew

18,680
13
103
118

This won't make the `div` stretch to the `td` unfortunately. http://jsfiddle.net/N8MG7/ – xec Dec 16 '13 at 08:31
The entire problem comes from the rowspan, which your demo is lacking. – xec Dec 16 '13 at 08:38
This is still no good, `position: relative;` will not work on a ``. http://stackoverflow.com/questions/4564638 – xec Dec 16 '13 at 09:03
It'd be easy with javascript... can you use javascript? – Andrew Dec 16 '13 at 09:10
im pretty sure its can work with only css i should not use JS – przeqpiciel Dec 16 '13 at 09:12
See the fiddle: http://jsfiddle.net/s4dDL/4/ it works, you just have to manually set the height... unfortunately 100% sets it for the row only not the rowspan=2. otherwise why not just use the td element rather than a div – Andrew Dec 16 '13 at 09:16
Firefox doesn't support position: relative on td/th. See this in FF http://jsfiddle.net/s4dDL/10/ – Spadar Shut Dec 16 '13 at 09:34
Regarding your fiddle update #8, you can't just set all the divs to 200px (double a single td height), just the one's that are double rows. See this fix: http://jsfiddle.net/s4dDL/11/ – Andrew Dec 16 '13 at 09:44
Actually yea, you dont need the positioning and it doesnt work on firefox, if you fill the cell completely it doenst need to be positioned. See this fix, removed positioning: http://jsfiddle.net/s4dDL/13/ – Andrew Dec 16 '13 at 09:50

How to fill DIV element into td parent?

1 Answers1