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 の下部にセクションを追加しようとしていますが、上部のように 50 ピクセルではなく高さ 64 ピクセルにする必要があります。

そこで、 の上部で行ったことを複製して、高さを 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 に答える