How to make div fill td height
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.
How to make div fill td height in Firefox
Try adding display: table
to your nested <div>
, and change height: 1px
to height: 100%
on the parent <td>
Example that works in Firefox, IE and Chrome
table,th,td { border: 1px solid black;}
.fix_height { height: 1px;}
@-moz-document url-prefix() { .fix_height { height: 100%; }}
<table> <tr> <td class="fix_height"> <div style="border:1px solid red; height:100%; display:inline-table"> I want cell to be the full height </div> </td> <td> This cell <br/>is higher <br/>than the <br/>first one </td> </tr></table>
Make a DIV fill an entire table cell
The following code works on IE 8, IE 8's IE 7 compatibility mode, and Chrome (not tested elsewhere):
<table style="width:100px"> <!-- Not actually necessary; just makes the example text shorter -->
<tr><td>test</td><td>test</td></tr>
<tr>
<td style="padding:0;">
<div style="height:100%; width:100%; background-color:#abc; position:relative;">
<img style="left:90px; position:absolute;" src="../Content/Images/attachment.png"/>
test of really long content that causes the height of the cell to increase dynamically
</div>
</td>
<td>test</td>
</tr>
</table>
You said in your original question that setting width
and height
to 100%
didn't work, though, which makes me suspect that there is some other rule overriding it. Did you check the computed style in Chrome or Firebug to see if the width/height rules were really being applied?
Edit
How foolish I am! The div
was sizing to the text, not to the td
. You can fix this on Chrome by making the div
display:inline-block
, but it doesn't work on IE. That's proving trickier...
Make div height 100% in a table cell
If you only need the background color to cover the entire cell, you can just set it on the td
rather than div
.
td:last-child {
background-color: green;
}
If you really need to make the div
to cover the cell, you can try using the position
tricks. Note, this approach only works when there is less data in the second cell.
td {
position: relative;
}
td:last-child div {
background-color: green;
width:100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
jsFiddle
Make a div fill up the entire width and height of a table cell with unspecified dimensions
After trying many things it seems that as of 2020 stretching a div
to fill all the available space of a table cell without JavaScript is not possible unless you use absolute/relative positioning.
The downside with absolute positioning is that the cell does not expand with the content inside it and even not expanded the table cell seems to break on mobile ( tested with an iphoneXS on IOS14 )
dev-sbx.github.io/x
The only real solution here seems to be using a CSS Grid layout opposed to an HTML table.
How to make a div occupy the full height of td
Two things:
1.) Add ´box-sizing: border-box;´as a general rule (* selector) (if you want to see the red border on all four sides of the cell)
2.) Add padding: 0
to the cell to get rid of the tiny white space between red and blue borders.
* { box-sizing: border-box;}body,html { width: 100%; height: 100%; padding: 0px; margin: 0px;}
.full { width: 100%; height: 100%; border: 10px solid red;}
#content { width: 100%; height: 100%;}
#content>table { width: 100%; height: 100%;}
#content>table>tbody>tr>td { border: 10px solid blue; padding: 0;}
#container { width: 100%; height: 100%; border
<div id="content"> <table> <tr> <td style="height: 100%"> <div id="container"> <div class="full"> foo </div> </div> </td> </table></div>
div will not fill height of td with height: 100%
please try:
the div will be 100%; height.
div{
height: 100%;
border: 1px solid;
display:inline-block;
}
Related Topics
Text Overflow Ellipsis on Two Lines
Align Image in Center and Middle Within Div
How to Remove a Div But Keep Its Elements
How to Center an Element in the Middle of the Browser Window
What's the Difference Between HTML 'Hidden' and 'Aria-Hidden' Attributes
Html5 Localstorage Size Limit for Subdomains
How to Conditionally Render Plain HTML Elements Like <Div>S
Next.Js Redirect From/To Another Page
Angular 2 Checkbox Two Way Data Binding
How to Uninstall a Service Worker
How to Stop Text from Taking Up More Than 1 Line
How to Center Nav-Items in Bootstrap
How to Make Bootstrap 3 Fluid Layout Without Horizontal Scrollbar
How to Include a Font .Ttf Using CSS