HTML 邮件 - 无法修复 td 高度答案

【问题标题】：HTML mail - Unable to fix td heightHTML 邮件 - 无法修复 td 高度
【发布时间】：2017-01-02 02:13:31
【问题描述】：

我正在尝试制作 html 邮件，因此我需要使用内联 CSS。问题是我无法弄清楚为什么我设置的单元格高度没有按我的预期显示。我已经像我希望的那样设置了单元格的 % 高度，但结果并不像我预期的那样。

代码是这样的，你可以看到结果不是我想要的，因为我为标题设置了 15%，但结果显然不是 15%，无论值如何，它都不会改变结果。另一个 td 也会发生同样的事情：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset="UTF-8">
  <title></title>
  </head>
  <body>
      <table style="table-layout:fixed; width:56%; height:100%;"  border="1" bordercolor=black align=center>
             <tr>
                <th colspan="2" style="height:15%; width:100%;" >
                <a href="http://www/">
                  <img src="D:\web_mail\EN_TW1-EE_3D-Logo.pn" width="56%"  alt="Header"/>  </a>
                </th>
             </tr>
             <tr>
                 <td  style="border-right-width: 0.5px; border-bottom-width: 1px; height:10%;      width:50%;"  >
                   <img src="D:\web_mail\Halo_4_-_Master_Chief.pn" width="100%"  alt="Patrik" />
                 </td>
                 <td style="border-left-width: 0.5px; border-bottom-width: 1px; height:10%; width:50%;" >
                   <img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="100%"  alt="Alberta" /> 
                 </td>
             </tr>
             
             <tr>
                <td colspan="2" style="height:60%; width:100%;" >
                   <img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="100%" alt="Igor"/>  
                </td>
             </tr>
             <tr>
                <th colspan="2" style="height:15%; width:100%;" >
                   <img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="56%" alt="Footer"/>  
                </th>
             </tr>          
      </table>   
  </body>
</html>

希望你能帮助我。

【问题讨论】：

jsfiddle.net/j2bcc24o 放到JSFiddle里面就好了？
恐怕不是，尝试将标题中的高度编辑为 5%，您会发现它没有任何变化。这令人沮丧。

标签： html css html-table html-email

【解决方案1】：

要使图像拉伸到与包含框相同的高度和宽度，只需添加 100% 的宽度和等于其所在行的高度：

http://jsfiddle.net/j2bcc24o/4/

如果您只想要宽度，请选择：

http://jsfiddle.net/j2bcc24o/3/

<td style="border-right-width: 0.5px; border-bottom-width: 1px; height:10%; width:50%;">
    <img src="image.png" width="100%" height="10%" alt="Patrik" />
</td>

并且不要忘记将 html 和 body 设置为 100% 的高度和宽度以及 0 的填充和边距：

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

【讨论】：

好的，我知道了，谢谢。但是为什么我在正确的图像上遇到这个问题？我不知道为什么它不尊重我设置的边界：dropbox.com/s/v1n6x47ygavxs8e/Immagine.png?dl=0
这可能是因为您的高度设置为百分比，而您的边框设置为像素。你的百分比加起来是 100%。不幸的是，您不能将边框设置为百分比，尽管有以下解决方案：stackoverflow.com/questions/13474754/…
不错的解决方案，但问题是我不能使用 div，而只能使用内联 css，因为我正在尝试创建一个 html 邮件。没有办法解决这个问题？
您可以将图片作为背景放入：jsfiddle.net/Lukedturnbull/1agb2ccc/1/embedded/result 并在 TD 中为链接创建可点击空间

【解决方案2】：

我无法正确理解您的问题，

将类分配给 td 并设置高度

<td class="classname">
</td>

.className{
height:20%;
background:red;
}

试试下面的代码

如果您需要任何帮助，请告诉我。

<html>
<head>
<style>
html,body{ 
	height:100%;
	margin:0 auto;
}

table{
	table-layout:fixed; 
	width:56%; 
	height:100%; 
	border:1px solid #000;
	text-align:center;
	margin:0 auto;
}

table th{
	height:15%;
	width:100%;

}
.className{
height:20%;
background:red;
}

td{
	height:50%;
	border:1px solid #000;
	background:#000;
	width:100%; 
}
</style>
</head>
<body>
	<table >
	<tr>
		<th colspan="2" >
		<a href="http://www/"> <img src="D:\web_mail\EN_TW1-EE_3D-Logo.pn" width="56%"  alt="Header"/>  </a>
		</th>
	</tr>
	<tr>
		<td >
			<img src="D:\web_mail\Halo_4_-_Master_Chief.pn" width="100%"  alt="Patrik" />
		</td>
		<td >
			<img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="100%"  alt="Alberta" /> 
		</td>
	</tr>

	<tr>
		<td colspan="2" class="className" >
			<img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="100%" alt="Igor"/>  
		</td>
	</tr>
	<tr>
		<th colspan="2" >
			<img src="D:\web_mail\08e7d7c88c962186ed557780ab41c628-d65czl9.jp" width="56%" alt="Footer"/>  
		</th>
	</tr>          
	</table>   
</body>
</html>

【讨论】：

关键是将height: 100% 分配给body 和html 标签，你做对了。请注意，OP 正在尝试为电子邮件设置 HTML 样式，而嵌入式样式表在大多数电子邮件客户端中通常会失败。
谢谢，我想做的是设置单元格的高度，以便它们是固定的，我不需要调整图像大小以使其适合我想要的。我选择了一些随机图像来更好地解释我自己：如果你用一些图像查看结果，这就是我得到的。例如，如果我想使页脚单元格更小，我需要调整图像的大小，但我想调整单元格的高度，而不是触摸我想删除的 img 标签上的图像高度和宽度属性。这可能吗？非常感谢！ dropbox.com/s/v1n6x47ygavxs8e/Immagine.png?dl=0
@MarcAudet 实际上我将它添加到了 html 和 body 标签中，但即使进行了这个更改，我也无法像我想要的那样设置页脚单元格。事实上，如果我将页脚设置为 10%，我不会得到我想要的，因为图像的宽度属性似乎控制单元格大小，如果可能的话，我想避免这种情况。谢谢
它在我的 JSFiddle 中似乎仍然可以正常工作：jsfiddle.net/j2bcc24o/3 The Images resize when you resize the browser
或者如果你想让高度与它所在的表格行大小相同，只需添加相同的百分比高度：jsfiddle.net/j2bcc24o/4

【解决方案3】：

以百分比定义高度不适用于 td/div，特别是对于邮件程序，只需要分配像素值。

【讨论】：

但我想在所有不同的分辨率下保持相同的比例。我不能做到这一点吗？