Question

我有一个页面有两个不同的部分：一个定义宽度的左侧和一个包含页面列表的全高，显示全宽和高的右侧选定的页面。所描述的行为与A元素和TARGET属性完美匹配;单击链接，右侧IFRAME的来源更改。但是，我的问题在于IFRAME的尺寸：我希望它填满页面的整个右侧，因为它是该网站，从逻辑上讲，我希望它能够引起用户的注意。

我的想法是简单地将其全部填充为TABLE填充页面（height和width 100%）和一行有两个单元格;一个用于左边，一个用于右边。我能够轻松地给出这两个正确的宽度和高度（左侧width 6.5in和height 100%，而右侧width和height {1}} 100％）。在左侧TD单元格中，我的页面列表为UL A个，通过CSS提供display LI属性}}秒。 在右侧TD单元格中，有一个IFRAME width 100%和height 100%。这就是问题所在：它填满了整个宽度，但拒绝比默认值更高或更短（150px）这在IE，Firefox和Opera中是一致的，但不是Chrome （Chrome正确拉伸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>

这应该显示我的网站的基本概念，为了清晰起见，主要元素以不同颜色勾勒出来。在这里，为了拥有小代码，它以不良形式（轮廓，内联样式等）完成。实际网站还有几百行，我认为你不想看。

Answer 1

如果您只使用iframe的代码，您会看到它在IE中延伸至100％。此问题可能与您的表有关。表格不被视为页面布局的最佳实践。您可能希望使用'float'作为布局。

Answer 2

好的，这是 - 两列布局和the paste：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>layout</title>
<style type="text/css">

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

#left {
        float:left;
        width:6.50in;
        height:100%;
        border:4px solid #008;
        overflow: auto;
        background-color: #eee;
}

#right {
        position: relative;
        margin-left: 6.58in;
        height:100%;
        text-align:left;
        border:4px solid #080;
}

#left h1 {
        margin-left: 1em;
        color:blue;
}

#left ul {
        list-style-type:none;
        padding:8px 2px;
}

#left ul li a {
        font-size:32px;
        padding: 2px 1em;
        text-decoration:none;
}

#left ul li:hover {
        background-color:blue;
        color:white;
}

#left ul li:hover a {
        color:white;
}

#CONTENT_HOLDER {
        border:1px solid #FF00FF;
        height:100%;
        width:100%;
}

</style>
</head>
<body>

<div id="left">
<h1>Pages</h1>
<div>
        <ul>
                <li><a href="page1.htm" target="CONTENT_HOLDER">First Page</a></li>
                <li><a href="page2.htm" target="CONTENT_HOLDER">Second Page</a></li>
                <li><a href="lastPage.htm"  target="CONTENT_HOLDER">Final Page</a></li>
        </ul>
</div>
</div>

<div id="right">
        <iframe name="CONTENT_HOLDER" id="CONTENT_HOLDER"></iframe>
</div>

</body>
</html>

为什么HTML元素不总是服从CSS高度属性？

2 个答案: