我正在构建一个 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>
最佳答案
有两种方法。最简单但不太通用的是在灰色表格上设置像素高度 <td height="400"> .这将迫使它变得那么高。当然，这不会使其流到主要部分驱动的不同高度。
要使其 100% 包含主要部分中的内容并自动调整到高度，您必须删除嵌套表格。尝试像这样布置它:
<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#EEEEEE">
<tr>
<td width="30" height="20">
</td>
<td width="340" height="20">
</td>
<td width="30" height="20">
</td>
<td width="180" height="20">
</td>
<td width="20" height="20">
</td>
</tr>
<tr>
<td width="30">
</td>
<td width="400">
Main content here...<br>...<br>...<br>...<br>...<br>...<br>...
</td>
<td width="30">
</td>
<td width="120" bgcolor="#CCCCCC">
Panel Here<br>...<br>...<br>...
</td>
<td width="20">
</td>
</tr>
<tr>
<td width="30" height="20">
</td>
<td width="340" height="20">
</td>
<td width="30" height="20">
</td>
<td width="180" height="20">
</td>
<td width="20" height="20">
</td>
</tr>
</table>
关于html - 如何让表格在 HTML 电子邮件中达到 100% 高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22822228/