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...
How do I make a div fill an entire table cell?
have you tried changing css to:
#centerCell{
border: 1px solid black;
height:100%;
}
seems to work for me on edge, firefox and chrome
Make a div fill the height of the remaining screen space
2015 update: the flexbox approach
There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.
Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.
(taken from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.
To check current support you can also see here:
http://caniuse.com/#feat=flexbox
Working example
With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.
html,body { height: 100%; margin: 0;}
.box { display: flex; flex-flow: column; height: 100%;}
.box .row { border: 1px dotted grey;}
.box .row.header { flex: 0 1 auto; /* The above is shorthand for: flex-grow: 0, flex-shrink: 1, flex-basis: auto */}
.box .row.content { flex: 1 1 auto;}
.box .row.footer { flex: 0 1 40px;}
<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box"> <div class="row header"> <p><b>header</b> <br /> <br />(sized to content)</p> </div> <div class="row content"> <p> <b>content</b> (fills remaining space) </p> </div> <div class="row footer"> <p><b>footer</b> (fixed height)</p> </div></div>
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>
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%">
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.
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.
Related Topics
How to Put Text Inside Radio Button
Forcing a Column to Be Empty in a Responsive Grid Layout
How to Custom Table Responsive Materialize
Two Images Background Inline Separate by Diagonal Border
How to Remove a Specific Bullet Point Within a Ul in CSS
Css3 Rounded and Dotted Borders
::Before with Input in Firefox
How to Disable Anti-Aliasing in CSS When Using @Font-Face with Pixel Fonts
CSS Rgba Transparency Bug in Chrome
How to Target the Very Last List Element in CSS
Less: Extend a Previously Defined Nested Selector
CSS Attribute Selector: Apply Class If Custom Attribute Has Value? Also, Will It Work in IE7+
Should I Remove Vendor Prefixes
Flex-Box 100Vh Stretches Behind Mobile Safari Chrome - Are There Any Known Tricks or Solutions
How to Select a Text (Without Tag) in a Div Using CSS Selector