为了账号安全,请及时绑定邮箱和手机立即绑定

如何使<div>填充<td>高度

如何使<div>填充<td>高度

一只名叫tom的猫 2019-12-02 11:14:01
该问题的答案需要更新,因为浏览器已更改原始问题我已经浏览了StackOverflow上的几篇文章,但未能找到这个相当简单的问题的答案。我有这样的HTML构造:<table>  <tr>    <td class="thatSetsABackground">      <div class="thatSetsABackgroundWithAnIcon">        <dl>          <dt>yada          </dt>          <dd>yada          </dd>        </dl>      <div>    </td>    <td class="thatSetsABackground">      <div class="thatSetsABackgroundWithAnIcon">        <dl>          <dt>yada          </dt>          <dd>yada          </dd>        </dl>      <div>    </td>  </tr></table>我需要的是div填充的高度td,因此我可以将div的背景(图标)放置在的右下角td。您如何建议我去解决这个问题?
查看完整描述

3 回答

?
胡子哥哥

TA贡献1825条经验 获得超6个赞

CSS高度:仅当元素的父级具有明确定义的高度时,才100%有效。例如,这将按预期工作:


td {

    height: 200px;

}


td div {

    /* div will now take up full 200px of parent's height */

    height: 100%;

}

由于似乎您的<td>高度将是可变的,因此如果您在右下角的图标中添加了绝对定位的图像,该怎么办?


.thatSetsABackgroundWithAnIcon {

    /* Makes the <div> a coordinate map for the icon */

    position: relative;


    /* Takes the full height of its parent <td>.  For this to work, the <td>

       must have an explicit height set. */

    height: 100%;

}


.thatSetsABackgroundWithAnIcon .theIcon {        

    position: absolute;

    bottom: 0;

    right: 0;

}

像这样的表格单元格标记:


<td class="thatSetsABackground">  

  <div class="thatSetsABackgroundWithAnIcon">    

    <dl>

      <dt>yada

      </dt>

      <dd>yada

      </dd>

    </dl>

    <img class="theIcon" src="foo-icon.png" alt="foo!"/>

  </div>

</td>

编辑:使用jQuery设置div的高度


如果您将保留<div>为的子代,则<td>此jQuery片段将正确设置其高度:


// Loop through all the div.thatSetsABackgroundWithAnIcon on your page

$('div.thatSetsABackgroundWithAnIcon').each(function(){

    var $div = $(this);


    // Set the div's height to its parent td's height

    $div.height($div.closest('td').height());

});


查看完整回答
反对 回复 2019-12-02
?
森林海

TA贡献2011条经验 获得超2个赞

您可以尝试使div浮动:


.thatSetsABackgroundWithAnIcon{


    float:left;

}

或者,使用内联块:


.thatSetsABackgroundWithAnIcon{


    display:inline-block;

}

内联块方法的工作示例:


table,

th,

td {

  border: 1px solid black;

}

<table>

  <tr>

    <td>

      <div style="border:1px solid red; height:100%; display:inline-block;">

        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>


查看完整回答
反对 回复 2019-12-02
  • 3 回答
  • 0 关注
  • 1433 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信