Question

我目前有一个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底部添加一个部分，就像我在顶部一样，需要它是64px高而不是顶部的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>

然而，问题是现在顶部和底部都伸展了页面，只显示了它们应该的一半。任何帮助将不胜感激...谢谢！

Answer 1

继承了包含您的表格的重新包含，但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 part

<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>

将顶部和底部部分添加到IFRAME

1 个答案: