7

スクロール結果セクションを含む検索ツールを表示するために使用している次のコードがあります。IE では、コードは正常に動作します。

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html style="background:black;height:100%;width:100%;">
    <head>
      <title>Report</title> 
    </head>
    <body style="background:black;">
      <table HEIGHT="100%" WIDTH="100%" style="background:red;">
      <tr>
      <td>
        Search Area  
      </td>
      </tr>
      <tr>
      <td HEIGHT="100%" WIDTH="100%" style="background:orange;">
        <div style="overflow-y:scroll;height:100%;">
          <table style="width:100px;height:1000px;">
          <tr>
          <td style="background:white;">
            Results Area
          </td>
          </tr>
          </table>
        </div>      
      </td>
      </tr>
      </table>
    </body>
    </html>

しかし、次を追加して IE8 フォーマットを使用するようにメタ タグを設定すると、次のようになります。

<meta http-equiv='X-UA-Compatible' content='IE=edge' />

下部の DIV タグは、ページを超えて展開されます。私はいくつかのオプションを試しましたが、値の高さを実際に指定しないと回避する方法が見つかりません。ブラウザーウィンドウのサイズに関係なく、ページが画面の 100% を占めるようにしたいので、これは機能しません。

どんな助けでも大歓迎です。

4

5 に答える 5

5

このメタタグは正しい CSS レンダリングを有効にしますが、CSS では (設計により)height:100% 基本的に機能しません。

、、さらにはパーサーによって自動的に挿入される要素を含む、要素のすべての祖先に特定の高さを与える必要があります。<body><table><tr><tbody>

とにかく、このレイアウトはより簡単な方法で実現できます。

.topBanner {
    position:absolute; position:fixed; 
    height:2em; 
    top:0; left:0; width:100%;
}
body {padding-top: 2em}

これは IE6 では適切に機能しなくなりますが、 とは異なりoverflow、Mobile Safari では適切に機能します。

于 2009-12-20T23:52:41.570 に答える
1

編集：

DOCTYPE 宣言を削除すると、height="100%" が機能するようになりますが、ブラウザが quirks モードになり、望ましくありません。

一般的に言えば、レイアウトにテーブルを使用することはお勧めできません。代わりに CSS を使用する必要があります。

例: http://jsfiddle.net/rf649/7/

HTML

<div id="search">Search Area</div>
<div id="results">Results Area</div>

CSS: </p> 

#search {
    background-color: red;
    position: fixed;
    height: 150px;
    width: 100%;
}
#results{
    background-color: orange;
    position: fixed;
    top: 150px;
    width: 100%;
    bottom: 0;
    overflow: auto;
}
​
于 2010-01-03T19:36:40.480 に答える
0

クロスブラウザー CSS についての私の理解はそれほど大きくないので、最善の解決策ではないかもしれませんが、それは解決策です。

私が見た限りでは、オーバーフローさせたいコンテナーの高さ/幅を常に設定する必要があるため、それらを設定する必要があります。

解像度に対処するには、onReady イベントに jQuery スクリプトを追加して、高さと幅を動的に修正し、オーバーフローを機能させることをお勧めします。

于 2009-10-07T18:19:50.483 に答える
0

必要なものを取得するには、親要素のすべてのマージンとパディングをゼロに設定する必要があります。

更新:申し訳ありませんが、すぐに問題を理解できませんでした。ベンのヒントは、私が推測するより良いものであるはずです。:)

更新 2:おっと、Ben が回答を削除したため、最初の更新は意味がありません。body の高さを 100% に設定してみてください。これで問題が解決するはずです。

于 2009-10-07T18:19:23.073 に答える
0

私はあなたのような同様の問題を抱えていましたが、最終的に解決策は!important、固定高さ宣言の修飾子を持つ CSS 行エントリを変更することでした。HTML コードでは、クラス (CSS で定義) に がheight割り当てられていましたが、CSSはスタイルの読み込み中に を100%適用しました。!important

于 2009-12-16T16:22:12.207 に答える