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.
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
How to make div height to 100% of parent td
This should work for you:
table{
table-layout: fixed;
height:100%;
}
table tr td div{
height: 100%;
background: red;
top:0;
}
<table width="200" border="1">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><div>Test</div></td>
<td>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</td>
<td> </td>
</tr>
</tbody>
</table>
How to get div height 100% inside td of 100%
You need to set the height of the td to 100% too:
<td style="height: 100%">
jsFiddle
How to set 100% height of div inside table cell
Demo - codepen
Here's another relevant SO answer
It appears you need to add a height to the <table>
tag.
<table style="border-collapse: collapse; height:100%">
Firefox, IE9+ issue with div height 100% inside a td (working example on Chrome)
Try setting the height of the tr
and td
to 100%:
tr, td { height: 100%; }
Generally speaking to get height: 100%
to work correctly, all the heights of the element's parents must be set as well.
EDIT:
An alternative solution is to wrap the contents of the td
with a container div
and use absolute positioning to ensure the .edit-me
div effectively has 100% height.
Here's what the HTML would look like:
<table border="1">
<tr>
<td>
<div class="container">
<div class="edit-me"></div>
Foo
<br/>
Bar
</div>
</td>
<td>hello</td>
</tr>
</table>
and the CSS:
.container {
position: relative;
padding-left: 10px;
}
.edit-me {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width:10px;
border:1px solid blue;
background:red;
overflow: auto;
}
Hope this helps!
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...
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;
}
Full height div inside td
With a colon? Also, to get your spacing:
<td style="position:relative;">
<div style="width: 10px; position:absolute; top:10px; bottom:10px; background:grey">
</div>
</td>
EDIT:
I don't think it's possible without specifying an explicit height. The solution in the original question that you pointed to does not actually work. position:relative
does not seem to apply correctly to table cells. This could well be intentional and part of the spec.
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>
Related Topics
CSS Using Negative Relative Positioning Issue
Android Webview Border-Radius Aliasing
Horizontal Centered Menu in CSS
Set Font Size of Angular Material Tooltip
Css: Full Size Background Image
Xmlns W3 Url for Svg Spec Now Throwing Error in Chrome
CSS Float, Clear a "Row" of Floating Elements
Height: 100Vh; and Overflow "Content" on Smaller Screens
Putting a Inset Box Shadow on an Image or Image Within a Div
Ie11 Triggers CSS Transition on Page Load When Non-Applied Media Query Exists
What Does an Asterisk Before an Equal Sign Mean (*=) ? What About the Exclamation Mark
Flexbox, Min-Height, Margin Auto and Internet Explorer
Css2 Attribute Selectors with Regex
What's the :Any-Link Pseudo-Class For
Change Font Size in Vuetify Based on Viewport
Chrome's Hidden CSS Scroll-Snap Threshold and How to Change It