1

我目前有一个 iframe，它设置为覆盖我的大部分网页，点击它的链接。现在我在 iframe 的顶部有一个显示我的网站徽标和关闭它的按钮。这是我为此使用的代码：

<div id="iframe1_div" class="iframe1">

    <div class="iframe1_points" id="iframe1_points">
        <table cellspacing="0" cellpadding="0" width="100%" height="50px">
        <tr>
        <td width="110px" align="center"><img src="http://mysite.com/logo.png" alt="Website TItle" /></td>
        <td>Website Name</div></td>
        <td width="50px" align="center"><a href="#;" class="close"><img src="http://mysite.com/close.png" class="noborder" title="Close Window" alt="Close" /></a></td></tr>
        </table>
    </div>

    <iframe id="iframe1_self" style="width:100%;height:100%;" scrolling="yes" frameborder="0"></iframe>

</div>

这是与之关联的 CSS：

.iframe1{display: none;background: #FFFFFF;margin-top:50px;margin-bottom:50px;float: left;position: fixed;top: 50%; left: 50%;z-index:99999;}

.iframe1_points{display:none;background:#505469;background-repeat:repeat-x;background-position:bottom;color:#f0f0f0;font-size:12px;font-weight:normal;font-size:12px;}

现在这是我无法弄清楚的更棘手的部分。我正在尝试在 iframe 的底部添加一个部分，就像我在顶部一样，并且需要它高 64 像素而不是像顶部那样高 50 像素。

因此，我尝试复制顶部所做的操作，并将高度修改为 64px 并将其添加到下面，如下所示：

<div id="iframe1_div" class="iframe1">

    <div class="iframe1_points" id="iframe1_points">
        <table cellspacing="0" cellpadding="0" width="100%" height="50px">
        <tr>
        <td width="110px" align="center"><img src="http://mysite.com/logo.png" alt="Website TItle" /></td>
        <td>Website Name</div></td>
        <td width="50px" align="center"><a href="#;" class="close"><img src="http://mysite.com/close.png" class="noborder" title="Close Window" alt="Close" /></a></td></tr>
        </table>
    </div>

    <iframe id="iframe1_self" style="width:100%;height:100%;" scrolling="yes" frameborder="0"></iframe>

    <div class="iframe1_points" id="iframe1_points">
        <table cellspacing="0" cellpadding="0" width="100%" height="64px">
        <tr>
        <td width="110px" align="center"><img src="http://mysite.com/logo.png" alt="Website TItle" /></td>
        <td>Website Name</div></td>
        <td width="50px" align="center"><a href="#;" class="close"><img src="http://mysite.com/close.png" class="noborder" title="Close Window" alt="Close" /></a></td></tr>
        </table>
    </div>

</div>

然而，问题是现在顶部和底部都延伸到页面之外，只显示了大约一半的内容。任何帮助将不胜感激......谢谢！

4

1 回答 1

0

这是一个 redev，其中包括您的表格，但 HTML 的其余部分与您的原始文件有点不同。我希望结果是你所追求的。

html部分

<body>
        <div id="container">
            <div id="controls">
                <table>
                    <tr>
                        <td width="110px" align="center"><img src="http://mysite.com/logo.png" alt="Website TItle" /></td>
                        <td>Website Name </td>
                        <td width="50px" align="center"><a href="#;" class="close"><img src="http://mysite.com/close.png" class="noborder" title="Close Window" alt="Close" /></a></td>
                    </tr>
                </table>
            </div>
            <iframe src="http://ebay.com/">
                &nbsp;
            </iframe>
            <div id="bottom">
                <table>
                    <tr>
                        <td width="110px" align="center"><img src="http://mysite.com/logo.png" alt="Website TItle" /></td>
                        <td>Website Name </td>
                        <td width="50px" align="center"><a href="#;" class="close"><img src="http://mysite.com/close.png" class="noborder" title="Close Window" alt="Close" /></a></td>
                    </tr>
                </table>
            </div>
        </div>
    </body>

CSS部分

<style>
    div {border: 1px solid red;display: block;}
    #container {border: 1px solid blue;}
    #controls {height: 50px;}
    iframe {width: 100%;height: 500px;}
    #bottom {height: 64px;overflow: hidden;}
    table{width:100%;padding:0;}
</style>
于 2013-01-11T06:37:08.837 回答