2

我有一个页面，它有两个不同的部分：定义宽度和全高的左侧有一个页面列表，右侧是显示所选页面的全宽和全高。所描述的行为与A元素和TARGET属性完美配合；您单击链接，IFRAME右侧的来源会发生变化。但是，我的问题在于：我希望它填满页面的整个右侧，因为它是站点的主要点，所以从逻辑上讲，我希望它能够控制用户的注意力。IFRAME

我的想法是简单地把它全部TABLE填满页面（用 aheight和widthof 100%）和一行有两个单元格；一个用于左侧，一个用于右侧。我能够轻松地为它们提供适当的宽度和高度（左边有width和6.5in，height而100%右边有width和height100%）。在左边的TD单元格中，我有一个作为 s 的页面列表UL，A通过 CSS 给出display了 s 的属性LI。在右边的TD单元格中，有一个IFRAMEwith a widthof100%和 a heightof 100%。这就是问题所在：它填充了整个宽度，但拒绝高于或低于默认值 ( 150px)这在 IE、Firefox 和 Opera 中是一致的，但不是 ChromeIFRAME （Chrome 正确地垂直拉伸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>

这应该显示我网站的基本概念，为清楚起见，主要元素以不同的颜色勾勒出来。为了编写小代码，它以糟糕的形式（大纲、内联样式等）完成，在这里。实际站点还有几百行我认为您不想看到。

4

2 回答 2

0

如果您只使用 iframe 的代码，您会看到它在 IE 中拉伸到 100%。这个问题可能与您的桌子有关。表格不被认为是页面布局的最佳实践。您可能想考虑在布局中使用“浮动”。

于 2012-08-15T20:08:28.830 回答
-1

好的，这是 - 两列布局和粘贴：

<!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>
于 2012-08-15T21:59:23.640 回答