2

固定位置に赤いdivがあります：上部と下部が固定されています。

このdivには、セルにスクロール可能なdivが含まれているテーブルが含まれているため、コンテンツが赤いdivをオーバーフローすることはありません。

Chromeでは次のようになります：

ここに画像の説明を入力してください

しかし、Firefoxでは、コンテンツが大きくなり、赤いボックスから溢れ出します。

ここに画像の説明を入力してください

これが私のHTMLです：

<div id=a>
    <div id=b>
        <table id=c border=1>
            <tr><th height=20 width=20>
                <input type=button id=but value="Fill cell">
            </th><th>A</th></tr>
            <tr><th>dataname</th>
                <td><div id=val class=scrollable>cell content</div></td>
            </tr>
        </table>
    </div>
</div>

とCSS：

#a {
   position:fixed; top:20px; left:20px; bottom:50px;width:200px;
   background:red;
}
#b { height:100%; }
#c { width:100%; height:100%; }
.scrollable {
    width:100%; height:100%;
    overflow-y:auto;
}

そして、ここにテストのフィドルがあります：http: //jsfiddle.net/xusqc/

回答を送信する前に、FFで提案をテストすることをお勧めします。

FirefoxとIE9+で現在Chromeで動作するようにコードを修正するにはどうすればよいですか？

テーブルの最初の行の高さは、私のアプリケーションでは動的に変化する可能性があることに注意してください。また、データテーブルにさらに多くの行とセルがある場合は、ソリューションを適用できる必要があります。

4

2 に答える 2

0

クロスブラウザーの純粋なHTML/CSSソリューションが見つからなかったため、JavaScriptを使用する必要がありました（jQueryも使用しましたが、セル内にjQueryにバインドされたイベントハンドラーが多くない場合は、JavaScriptを使用しなくても実行できました）。

アイデアは、divを含むセルを空にし、.scrollableそれらの高さを計算し、セルを補充してから、高さを固定として設定することです。

これが私が書いた関数です：

function resetScrollableHeights(){
    $sp = $('.scrollable').closest('td'), heights = [], contents = [];
    $sp.each(function(){
        $(this).css('height', 'auto'); // without this, window shrinking would be badly handled
        contents.push($('.scrollable', this).detach());  // let's empty all scrollables
    });
    $sp.each(function(){ //now store the heights
        heights.push($(this).height());
    });
    $sp.each(function(){ // refill the scrollables and fix the heights
        $(this).append(contents.shift()).css('height', heights.shift());
    });
}

この関数は、ウィンドウのサイズが変更されたときに呼び出されます。

$(window).resize(resetScrollableHeights);

.scrollableまた、 divの内容が変更されたときにも呼び出す必要があります。

Chromium / Ubuntu、Chrome / Android、Firefox / Ubuntu、IE9/Win7でテストしました。純粋なHTML/CSSにバグがなかったWebKitベースのブラウザーでは役に立たないため、何らかの検出で非アクティブ化できますが、ブラウザーの検出がないコードを使用することをお勧めします。

デモンストレーション

于 2013-02-15T09:27:05.887 に答える
-1
  1. をに変更し<td>ます<td class="scrollwrap">。これには、ターゲットdivが含まれています。
  2. CSSを更新します。

：

 .scrollwrap { position:relative; }
 .scrollable {
     position:absolute; width:100%; height:100%; top:0; left:0; right:0; bottom:0;
     overflow:auto;
 }

ただし、注意してください。

  • height:100%親にも特定の高さがある場合にのみ機能し、計算された高さで常に機能するとは限りません。
  • left要素で＆rightまたはtop＆bottomを使用するとposition:absolute、一部のブラウザは幅と高さを計算できません
  • overflow-yまたはoverflow-xいくつかの使用制限があります。
于 2013-02-14T15:51:42.547 に答える