3

Hi I have this code,

<html>
    <body>
        <table>
            <tr>
                <td>
                    <div class="the-div">h:100%</div>
                </td>
                <td>
                    <div class="the-div-w-height">h:100px</div>
                </td>
            </tr>
        </table>
    </body>
</html>

with this style,

.the-div
{
  height: 100%;
  background-color: red;
}

.the-div-w-height
{
  height : 100px;
  background-color: yellow;
}

I want to make the red div stretch inside the td, the other div can change in height according to the content, the first div shall stretch with the table

Thank you

Mohamed Wagdy Khorshid
  • 547
  • 4
  • 15
  • 32

1 Answers1

3

Adding height: 100% on parents table and td:

http://codepen.io/anon/pen/ByjIv

table {
  height: 100%;
}
td {
  border: 1px solid #000;
  height: 100%;
}
.the-div
{
  height: 100%;
  background-color: red;
}

.the-div-w-height
{
  line-height: 100px;
  background-color: yellow;
}
FelipeAls
  • 21,711
  • 8
  • 54
  • 74
  • I don't want to change the height of the table or the td, this will stretch the table to fit the whole page – Mohamed Wagdy Khorshid Jul 06 '14 at 10:31
  • ?? It doesn't change anything to the height of the table (check the Codepen). But in the 2nd comment to your question (from gillesc), that's what Pete's solution does. – FelipeAls Jul 06 '14 at 13:18