2

2つの異なる部分があるページがあります。ページのリストがある定義された幅と全高の左側と、選択したページを表示する全幅と高さの右側です。説明されている動作は、A要素とTARGET属性で完全に機能します。リンクをクリックするとIFRAME、右側のソースが変更されます。しかし、私の問題はサイズにありますIFRAME：それがサイトの要点であるため、ページの右側全体を埋めたいので、論理的にはそれがユーザーの注意を支配するようにしたいです。

私のアイデアは、ページ全体（との）と1行を2つのセルTABLEで埋めるだけにすることでした。1つは左用、もう1つは右用です。私はこれらに適切な幅と高さの両方を簡単に与えることができました（左はとの、右はと100％）。左側のセルには、sのプロパティとしてCSSを介して与えられたsのページのリストがあります。右側のセルには、のとのがあります。ここで問題が発生します。全幅を埋めますが、デフォルトよりも高いまたは短いことを拒否します（）heightwidth100%width6.5inheight100%widthheightTDULAdisplayLITDIFRAMEwidth100%height100%150pxこれはIE、Firefox、Operaで一貫していますが、Chromeでは一貫していませんIFRAME（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% に伸びることがわかります。この問題はテーブルにある可能性があります。表は、ページ レイアウトのベスト プラクティスとは見なされません。レイアウトに「float」を使用することを検討することをお勧めします。

于 2012-08-15T20:08:28.830 に答える
-1

わかりました、ここにあります-2列のレイアウトと貼り付け:

<!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 に答える