Height of the div tag

How to make the div height to 100% so that if i change the div color the whole td color should be changed

 <table style="table-layout:fixed;width:100%;" border="1"  cellpadding=0 cellspacing=0>
                    <tr>
                       <td width="20%" height="70px" align="center">
                          <div class="step step1" style="display:block;" step="1">
                             <a href="#" onclick="javascript:getresource('1');">Video</a><p align="center"> <img id="img1" src="/media/img/accept.png" /><img id="img2" src="/media/img/close.gif" /></p>
                          </div>
                     </tr>
           </table>   

You just need height: 100%; in your styling, like this:

<div class="step step1" style="display:block; height: 100%;" step="1">

You can test it out here. However, you're missing a </td> which will give odd behavior in certain DOCTYPEs (it is valid in some), make sure to close that table cell to be safe. One other note, unless you have it overridden somewhere, there's no need for the display: block;, that's the default display for a <div> element.

Why don't you change the td's color?

div's style:

margin: 0;
padding: 0;
width: 100%;
height: 100%;
border: none;

Why don't you set the td color then?

<td width="20%" height="70px" align="center" style="background-color:Orange;">

<td style="height: 100%"><div style="height: 100%"></div></td> to be explicit, but by default it should be the whole height and width of the td provided the td and table have a height.