设置高度为100%

时间:2014-05-22 13:39:31

标签: html height

我有一个div,我希望将其设置为100%的高度,我知道如果div的高度为高,则div只能有一个百分比高度。我有一个表,它所在的列可以有不同的高度,具体取决于行中其他列的内容。那么如果td必须有100%的高度,我怎么还有一个100%高度的div?我还必须设置表格行高吗?如果是这样,我该怎么做,因为行的高度可以改变。

  <table width="100%">
    <tr style="min-height:90px;">
      <td width="500px" class="innerBox2">
        INFO HERE (THIS IS THE COLUMN THAT CAN CHANGE THE HEIGHT DEPENDING ON HOW MUCH INFO IS IN HERE)
      </td>
      <td width="90px" style="height:100%" align="center" class="innerBox">
        <div class="innerBox2" style="height:100%">
          THIS IS THE DIV IM ASKING ABOUT
        </div>
      </td>
    </tr>
  </table>

1 个答案:

答案 0 :(得分:0)

如果您希望单元格中的div拥有100%的表格并且您不知道或不想在表格上设置高度,则可以始终执行此操作:

http://jsfiddle.net/2R9sm/

的CSS:

.innerBox2{
    background:#999;
    position:absolute;
    top:0;
    bottom:0;
    overflow:hidden;
}
.innerBox1{
    background:#333;
}
table{
    position:relative;
}

HTML:

<table width="100%">
    <tr style="min-height:90px;">
      <td width="500px" class="innerBox1">
        INFO HERE (THIS IS THE COLUMN THAT CAN CHANGE THE HEIGHT DEPENDING ON HOW MUCH INFO IS IN HERE)
      </td>
      <td width="90px" style="height:100%" align="center" class="innerBox">
        <div class="innerBox2" style="height:100%">
          THIS IS THE DIV IM ASKING ABOUT
        </div>
      </td>
    </tr>
  </table>

基本上,position:absolute上使用div bottom:0; top:0; position:relative会使{{1}}父项的{100}(本例中为表格)