CODEWITHSUNDEEP
htmlcssheight
leora
leora

Reputation: 196761

How can I make a div take up 100% of the height of a html table cell that doesn't have a fixed TD height?

I have a html table and inside a cell i have a div

<td>
      <div class=content>some content</div>
</td>
<td>
      <div class=content>some content<br/>some content<br/>some content<br/></div>
</td>

some of the content in certain cells are multiple lines and the div has a background color so I want the view to be uniform so I want the divs with less content to still be the same height to cover the full td.

I tried doing

.content
{
    height:100%;
}

but that doesn't seem to change anything.

Upvotes: 1

Views: 191

Answers (3)

Mr_Green
Mr_Green

Reputation: 41840

Instead of applying background to the content div, apply to the td cell itself.

td {
    background-color: cornflowerblue;
    -webkit-box-shadow: inset 0px 0px 5px 0px rgba(255, 0, 0, 1);
    -moz-box-shadow: inset 0px 0px 5px 0px rgba(255, 0, 0, 1);
    box-shadow: inset 0px 0px 5px 0px rgba(255, 0, 0, 1);
    padding: 5px;
}

I also applied inset box-shadow which is alternate for applying border inside an element (In this case, the cell) as you had mentioned in the comments that your content div has a border too.

Working Fiddle

Upvotes: 1

maq
maq

Reputation: 1236

may be the problem is that you did not use Quotes with your class attribute

here is my code

<table>
  <tr>
    <td>
      <div >some content</div>
</td>
<td>
      <div>some content<br/>some content<br/>some content<br/></div>
</td>
  </tr>
</table>

check out here JSBIN hope it help

Upvotes: 0

Laxmikant Dange
Laxmikant Dange

Reputation: 7688

Height is the dynamic property, it applies according to contents. Hence you can't set it in percent. But if parent height is fixed then child can have height attribute in percent. Here, set some static height of td so you can use div height in percent.

Upvotes: 1

Related Questions