我的页面有两个不同的部分:定义宽度和全高的左侧包含页面列表，右侧显示全宽和高度所选页面。所描述的行为与 A 完美配合元素和 TARGET属性;您单击 IFRAME 的链接和来源在右边的变化。但是，我的问题在于 IFRAME 的大小 : 我希望它填满整个页面的右侧，因为它是网站的重点，所以从逻辑上讲我希望它能占据用户的注意力。
我的想法是简单地将其全部设为 TABLE填充页面(使用 height 和 width 的 100% )和一行有两个单元格；一左一右。我能够轻松地为它们提供适当的宽度和高度(左侧有 width 的 6.5in 和 height 的 100%，而右侧有 width 和 height 的 100%)。在左边TD单元格，我有一个页面列表 UL的 A s，通过 CSS 给出 display LI 的属性秒。 在右边TD细胞，有一个IFRAME用width的 100%和一个 height的 100% .这就是问题所在:它填满了整个宽度，但拒绝比默认值 (150px) 更高或更短这在 IE、Firefox 和 Opera 中是一致的，但 Chrome (Chrome 正确地垂直拉伸(stretch) IFRAME 100%)!高度值以像素、英寸、毫米和厘米为单位，但不是百分比!
下面是代码的独立版本，但我的主要问题是为什么大多数浏览器拒绝设置IFRAME高度使用百分比？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML style="border:1px solid #000000; height:100%; width:100%;">
<HEAD>
<STYLE>
UL A{
display:list-item;
}
</STYLE>
</HEAD>
<BODY style="border:1px solid #FF0000; height:100%; width:100%;">
<TABLE style="border:1px solid #00FF00; display:block; height:100%; width:100%;">
<TBODY STYLE="height:100%;">
<TR STYLE="height:100%;">
<TD style="border:1px solid #0000FF; height:100%; width:6.5in;">
<H1>Pages</H1>
<DIV>
<UL>
<A HREF="page1.htm" TARGET="CONTENT_HOLDER">First Page</A>
<A HREF="page2.htm" TARGET="CONTENT_HOLDER">Second Page</A>
<A HREF="lastPage.htm" TARGET="CONTENT_HOLDER">Final Page</A>
</UL>
</DIV>
</TD>
<TD STYLE="border:1px solid #FFFF00; height:100%; width:100%;">
<IFRAME NAME="CONTENT_HOLDER" ID="CONTENT_HOLDER" STYLE="border:1px solid #FF00FF; height:100%; width:100%;"></IFRAME>
</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
这应该显示我网站的基本概念，为了清楚起见，主要元素用不同颜色勾勒出来。为了使用小代码，这里以糟糕的形式(大纲、内联样式等)完成。实际站点还有几百行，我认为您不想看到。
最佳答案
如果您只获取 iframe 的代码，您会发现它在 IE 中扩展到 100%。这个问题可能与您的 table 有关。表格不被认为是页面布局的最佳实践。您可能需要考虑在布局中使用“ float ”。
关于html - 为什么 HTML 元素不总是遵循 CSS 高度属性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11976356/