[英]How do I get table to be 100% height in HTML email
我正在建立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>
如果我使用 HTML5 文档类型，为什么我不能使我的 div 高度为 100%？ 我如何得到它 100% 的高度
[英]Why can't I make my div 100% height if I use an HTML5 doctype? How do I get it 100% height
当HTML表格的宽度设置为100％时，如何获取HTML表格的边距？
[英]How do I get Html Table to respect margins when its width is set to 100%?
如何完全填写<div id="text_translate"><p>我有一些 HTML 将 Javascript 注入 web 页面。 我注入的最终 HTML 看起来像：</p><pre> <table style="border-width: 0px; margin 0px; width:100%; height: 100%; padding:0px;"> <tbody style="border-width: 0px; margin 0px; width:100%; height: 100%; padding:0px;"></pre><p> 出于某种奇怪的原因，当我在 Firebug 中检查 tbody 时，它的大小似乎比表格小 4px。 我如何才能填满？</p></div>100% 与在 HTML 中？<table> <tbody></tbody></table>
[英]How do I completely fill a <table> 100% with <tbody> in HTML?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.