是否可以在没有为父级设置高度的情况下使高度 50% 工作？

Question

不能使用 flex 或任何花哨的东西 css，因为这是一封电子邮件 HTML。我正在尝试用具有底部边框的 div 来包装一些内容，但边框需要位于内容的最后一行，就像我目前放在一起的代码一样。

问题是我有不止一个包装需要看起来一样，所以如果我为每个包装设置高度会很乱，而且需要移动友好。

<table>
  <tr>
    <td width="400" style="padding:0px 0 8px 0;font-size:17px;line-height:26px;font-weight:300;color:#4d4d4d;font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;">
                <div style="border-bottom:1px dotted #333;display:inline-block;height: 45px;"> <!--Instead of putting a set height, I want to put 50%-->
                        <a class="textlink" href="https://info.bio-rad.com/PIF-Webinar-2021.html" target="_blank" style="text-decoration:none;color:#D1460A;font-weight:300;font-size:17px;line-height:30px;font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;background-color:#ffffff;">Some text content example Some text content Some text content&nbsp;&#9656;&nbsp;</a>
                </div>
                </td>
  </tr>
</table>

Answer 1

使用 td 您可以添加 height:0 并能够对子元素使用百分比

<table>
  <tr>
    <td width="400" style="padding:0px 0 8px 0;font-size:17px;line-height:26px;font-weight:300;color:#4d4d4d;font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;height:0;">
      <div style="border-bottom:1px dotted #333;display:inline-block;height: calc(100% - 15px);">
        <!--Instead of putting a set height, I want to put 50%-->
        <a class="textlink" href="https://info.bio-rad.com/PIF-Webinar-2021.html" target="_blank" style="text-decoration:none;color:#D1460A;font-weight:300;font-size:17px;line-height:30px;font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;background-color:#ffffff;">Some text content example Some text content Some text content&nbsp;&#9656;&nbsp;</a>
      </div>
    </td>
  </tr>
</table>

是否可以在没有为父级设置高度的情况下使高度 50% 工作？

Is it possible to make height 50% working without set height for parent?

css

border

html-email