Question

我正在构建一个HTML电子邮件，我的右栏填补了100％的高度。

如果你看看我的jfiddle：http://jsfiddle.net/zQNS4/143/

你会看到我希望右列（灰色条）一直向下填充，与左侧的高度相等。我该怎么做？

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test</title>
</head>
<body >
<div align="center">
  <table border="0" cellspacing="0" cellpadding="0" width="600">

    <!--Logo-->
    <tr>
      <td width="600" colspan="2" align="left" valign="top">
      <table border="0" cellspacing="0" cellpadding="0" width="100%">
          <tr>
            <td width="600" style="padding: 0px 0px 8px 0px; font-family:arial,helvetica,sans-serif; font-size:11px; color:#616161" align="right" valign="bottom"><div class="mktEditable" id="header-text">Etiam porta sem malesuada magna mollis euismod.</div></td>
          </tr>
        </table></td>
    </tr>

    <!--Box, two columns: 400,200-->
    <tr>
      <td width="600" colspan="2" align="left" valign="top" style="border:1px solid #d1d1d1">
      <table border="0" cellspacing="0" cellpadding="0" width="100%">
          <tr>
            <td width="400" valign="top" align="left" style="padding: 22px 12px 10px 30px; color:#616161; font-family:arial,helvetica,sans-serif; font-size:12px; line-height:16px">


              <br>
              <div class="mktEditable" id="header-body">
                <div style="color:#f66511; font-size:23px; line-height:27px; margin-bottom:5px"> Pharetra Euismod Venenatis Tortor Consectetur </div>
              </div>
              <div class="mktEditable" id="subhead-body"> <span style="font-size:14px; line-height:18px; margin:0; display:block"> Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient </span><br>
              </div>
              <div class="mktEditable" id="body">

<p style="font-size:12px;color:#616161;line-height:17px; margin:10px 0 10px 0;text-align:left">
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient.</p>


              </div></td>
            <td width="200" align="right" valign="top"  style="padding: 10px 10px 10px 10px;">
            <table border="0" cellspacing="0" cellpadding="0" width="190" bgcolor="#e2e3e4" style="border:1px solid #bdbcbc">
                <tr>
                  <td width="190"  align="right" valign="top" >
                  <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#e2e3e4">
                      <tr>
                        <td width="190" align="center" valign="top" style="padding: 92px 25px 0 25px;"><div class="mktEditable" id="sidebar-body">
                        <p style="font-size:16px;color:#616161;font-family:arial,helvetica,sans-serif;margin:0 0 10px 0;text-align:left">
                            <strong>Questions?</strong></p>
                        <p style="font-size:12px;line-height:17px;color:#616161;font-family:arial,helvetica,sans-serif;margin:0 0 10px 0;text-align:left">
                            Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient </p>
</div></td>
                      </tr>
                  </table></td>
                </tr>
              </table></td>
          </tr>
        </table></td>
    </tr>
  </table>
</div>
</body>
</html>

Answer 1

有两种方法。最简单但功能较少的是在灰色表<td height="400">上放置一个像素高度。这将迫使它如此之高。当然，这并不会使它流向由主要部分驱动的不同高度。

要在主要部分中拥有100％的内容并自动调整到高度，您必须删除嵌套表。试着这样铺设：

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#EEEEEE">
  <tr>
    <td width="30" height="20">&nbsp;
    </td>
    <td width="340" height="20">&nbsp;
    </td>
    <td width="30" height="20">&nbsp;
    </td>
    <td width="180" height="20">&nbsp;
    </td>
    <td width="20" height="20">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="30">&nbsp;
    </td>
    <td width="400">
          Main content here...<br>...<br>...<br>...<br>...<br>...<br>...
    </td>
    <td width="30">&nbsp;
    </td>
    <td width="120" bgcolor="#CCCCCC">
      Panel Here<br>...<br>...<br>...
    </td>
    <td width="20">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="30" height="20">&nbsp;
    </td>
    <td width="340" height="20">&nbsp;
    </td>
    <td width="30" height="20">&nbsp;
    </td>
    <td width="180" height="20">&nbsp;
    </td>
    <td width="20" height="20">&nbsp;
    </td>
  </tr>
</table>

如何在HTML电子邮件中将表格设置为100％高度

1 个答案: