How to make div fill td height

Question

I ve looked through several posts on StackOverflow  but haven t been able to find an answer to this rather simple question   I have an HTML construct like this    lt table gt     lt tr gt       lt td class  thatSetsABackground  gt         lt div class  thatSetsABackgroundWithAnIcon  gt           lt dl gt             lt dt gt yada            lt  dt gt             lt dd gt yada            lt  dd gt           lt  dl gt         lt div gt       lt  td gt       lt td class  thatSetsABackground  gt         lt div class  thatSetsABackgroundWithAnIcon  gt           lt dl gt             lt dt gt yada            lt  dt gt             lt dd gt yada            lt  dd gt           lt  dl gt         lt div gt       lt  td gt     lt  tr gt   lt  table gt    What I need is for the div to fill the height of the td  so I can be able to position the div s background  the icon  at the bottom-right corner of the td   How do you suggest I go about that

User · Answer

You could try making your div float    thatSetsABackgroundWithAnIcon       float left      Alternativelly  use inline-block    thatSetsABackgroundWithAnIcon       display inline-block      Working example of the inline-block method    x000D   x000D  table  x000D  th  x000D  td   x000D    border  1px solid black  x000D    x000D   lt table gt  x000D     lt tr gt  x000D       lt td gt  x000D         lt div style  border 1px solid red  height 100   display inline-block   gt  x000D          I want cell to be the full height x000D         lt  div gt  x000D       lt  td gt  x000D       lt td gt  x000D        This cell x000D         lt br  gt is higher x000D         lt br  gt than the x000D         lt br  gt first one x000D       lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

If you give your TD a height of 1px  then the child div would have a heighted parent to calculate it s   from  Because your contents would be larger then 1px  the td would automatically grow  as would the div  Kinda a garbage hack  but I bet it would work

User · Answer

CSS height  100  only works if the element s parent has an explicitly defined height   For example  this would work as expected   td       height  200px     td div          div will now take up full 200px of parent s height        height  100       Since it seems like your  lt td gt  is going to be variable height  what if you added the bottom right icon with an absolutely positioned image like so    thatSetsABackgroundWithAnIcon          Makes the  lt div gt  a coordinate map for the icon        position  relative          Takes the full height of its parent  lt td gt    For this to work  the  lt td gt         must have an explicit height set         height  100       thatSetsABackgroundWithAnIcon  theIcon               position  absolute      bottom  0      right  0      With the table cell markup like so    lt td class  thatSetsABackground  gt       lt div class  thatSetsABackgroundWithAnIcon  gt           lt dl gt         lt dt gt yada        lt  dt gt         lt dd gt yada        lt  dd gt       lt  dl gt       lt img class  theIcon  src  foo-icon png  alt  foo    gt     lt  div gt   lt  td gt    Edit  using jQuery to set div s height  If you keep the  lt div gt  as a child of the  lt td gt   this snippet of jQuery will properly set its height      Loop through all the div thatSetsABackgroundWithAnIcon on your page    div thatSetsABackgroundWithAnIcon   each function        var  div     this           Set the div s height to its parent td s height      div height  div closest  td   height

User · Answer

Really have to do this with JS  Here s a solution  I didn t use your class names  but I called the div within the td class name of  full-height   -  Used jQuery  obviously  Note this was called from jQuery document  ready function    setFullHeights       Also note if you have images  you are going to have to iterate through them first with something like   function loadedFullHeights    var imgCount   jQuery   full-height   find  img   length  if imgCount   0       return setFullHeights      var loaded   0  jQuery   full-height   find  img   load function        loaded        if loaded    imgCount           setFullHeights                  And you would want to call the loadedFullHeights   from docReady instead  This is actually what I ended up using just in case  Got to think ahead you know   function setFullHeights    var par  var height  var     jQuery  var heights     var i   0      full-height   each function        par    this  parent        height     par  height        var tPad   Number   par  css  padding-top   replace  px            var bPad   Number   par  css  padding-bottom   replace  px            height -  tPad bPad      heights i  height      i        for ii in heights           full-height   eq ii  css  height   heights ii   px

User · Answer

Modify the background image of the  lt td gt  itself    Or apply some css to the div    thatSetsABackgroundWithAnIcon      height 100

User · Answer

This questions is already answered here  Just put height  100  in both the div and the container td

[html] How to make <div> fill <td> height

Examples related to html

Examples related to css

Examples related to html-table