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...
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 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.
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
height: 100% for div inside div with display: table-cell
When you use %
for setting heights or widths, always set the widths/heights of parent elements as well:
.table {
display: table;
height: 100%;
}
.cell {
border: 2px solid black;
vertical-align: top;
display: table-cell;
height: 100%;
}
.container {
height: 100%;
border: 2px solid green;
-moz-box-sizing: border-box;
}
<div class="table">
<div class="cell">
<p>Text
<p>Text
<p>Text
<p>Text
<p>Text
<p>Text
<p>Text
<p>Text
</div>
<div class="cell">
<div class="container">Text</div>
</div>
</div>
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>
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
full height of a div inside a table
Give the td
a height
of 100%
. Then use the calc property to set the height of .content-box-orange .content
fiddle
I think that you could explore flexbox instead of table for this layout. Update your question if you are open to that...
html,
body {
height: 98%;
background-color: #E5E5E3
}
table tbody tr td {
height: 100%;
}
.content-box-gray .content {
overflow: hidden;
padding: 10px;
font-size: 15px;
border: 0px;
color: #3385FF;
background: #FFFFFF;
}
.content-box-gray .title {
height: 30px;
line-height: 30px;
background: #F1F1F1;
font-size: 18px;
font-weight: bold;
font-family: verdana;
display: block;
color: #464648;
display: block;
padding: 10px;
border: 0px;
border-bottom: none;
}
.content-box-orange {
height: 100%;
}
.content-box-orange .content {
overflow: hidden;
padding: 10px;
font-size: 15px;
border: 0px;
color: #000;
background: #FFFFFF;
height: calc(100% - 66px);
}
.titleorange {
height: 30px;
line-height: 30px;
background: #F78D27;
font-size: 18px;
font-weight: bold;
font-family: verdana;
display: block;
color: #FFF;
display: block;
padding: 10px;
border: 0px;
border-bottom: none;
}
<table width="100%" height="100%" border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td colspan="2" rowspan="3">
<div class="content-box-orange">
<div class="titleorange">3</div>
<div class="content">Lorem Ipsum is simply dummy text</div>
</div>
</td>
</tr>
<tr style="height:100% ">
<td style="background-color: aqua;height: 50%">1</td>
</tr>
<tr>
<td style="background-color: aqua;height: 50%">2</td>
</tr>
<tr>
<td colspan="3" style="background-color: #FFF">4</td>
</tr>
<tr>
<td style="background-color: #FFF">5</td>
<td colspan="2" rowspan="2">
<div class="content-box-gray">
<div class="title">7</div>
<div class="content">Lorem Ipsum</div>
</div>
</td>
</tr>
<tr>
<td style="background-color: #FFF">6</td>
</tr>
</tbody>
</table>
100% height div inside table-cell not working on Firefox
The trick is:
- Set row's
height
to100%
- Set cell's
height
to0
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#table {
width: 100%;
display: table;
height: 100%;
}
#row {
display: table-row;
height: 100%;
}
#cell_1,
#cell_2 {
display: table-cell;
height: 0;
}
#cell_1 {
width: 390px;
background: aliceblue;
}
#cell_2 {
background: yellow;
}
#overflown_div {
height: 100%;
overflow-y: scroll;
padding: 10px;
box-sizing: border-box;
}
#overflown_div p {
height: 80px;
}
<div id="table">
<div id="row">
<div id="cell_1">
<div id="overflown_div">
<p>Blah blah blah</p>
<p>Blah blah blah</p>
<p>Blah blah blah</p>
<p>Blah blah blah</p>
<p>Blah blah blah</p>
<p>Blah blah blah</p>
<p>Blah blah blah</p>
<p>Blah blah blah</p>
<p>Blah blah blah</p>
<p>Blah blah blah</p>
</div>
</div>
<div id="cell_2">
Blah blah blah
</div>
</div>
</div>
Related Topics
CSS Shorthand to Identify Multiple Classes
Responsive Google Maps V3 - Cannot Get 100% Height
How to Make My Font Bold Using CSS
Vertically Rotate Text Inside an HTML Table Header Cell
How to Remove an Element from the Flow
React Rtl. Conditional Import CSS
Bootstrap 5 Off Canvas Missing CSS/Js
CSS Variables Don't Work in Microsoft Edge
How to Style the Dropdown on Google Places Autocomplete API
Lighten the Background Colour from Another Class
Get Color Attribute from the Styles Table
Does Width Property Affects Clear
CSS Pseudo Classes Input:Not(Disabled)Not:[Type="Submit"]:Focus
Instagram New Logo CSS Background