html - 高さが100％でオーバーフローする要素

Question

基本的に達成する必要があるのは、親の高さの100％を消費し、コンテンツの高さが高い場合はスクロールを表示する要素（div、span、tableなど）を用意することです。

問題は、癖のあるchromeとIEだけがで問題なく動作することですheight:100%; overflow: auto;。標準のFirefox、Opera、IE（IE 7以降、「標準」）はオーバーフローを無視し、html要素を親サイズより下に拡大します。固定の高さを設定しても機能しますが、レンダリングする前に使用可能な高さを決定できない場合、複数の可能な値があります。

簡略化された例（この場合はjsFiddle）：

<body>
    <div id="parent">
        <table id='container'>
            <tr>
                <td>
                    <div id='element-in-question'>
                        <!--Content long enough to stretch the div-->
                    </div>
                </td>
            </tr>
            <tr>
            <td id='footer-cell'>
                <div id='footer'>I'm footer<div>
            </td>
            </tr>
        </table>
    </div>
</body>

Css：

#parent { height:500px; width:500px; position:absolute; }
#container { height: 100%; width:100%; }
#element-in-question { height:100%; width:100%; overflow: auto; }
#footer-cell { height:30px;}
#footer { height: 30px; }

実際のアプリでは、これらすべてがiframeで実行され、テーブルはヘッダーやフッターなどをレンダリングするために使用されます。テーブルの使用をやめることを提案しないでください。これは、注意が必要な100以上の場所があるレガシーアプリケーションです。CSSのみのソリューションが理想的です。

もう1つのポイント：Chrome、IE10標準モードで動作するはずです。FF、Opera、Safariはサポートされていません。IE9以下では処理が異なります。

更新：高さが異なる約10個のフッターがあります。理想的には、ソリューションは固定フッターの高さに依存しないようにする必要があります。

score 4 · Accepted Answer

どうぞ：

フィドルを更新しました。

問題はheight: 100%;、次の定義されたコンテナーをいっぱいにすることです。何らかの理由で、テーブルはその目的のための有効なコンテナーとは見なされません。したがって、テーブルのレイアウト方法の奇抜さを利用する必要があります。

position: absolute;
top:5px; left:5px;
right: 5px;
bottom: 40px;
overflow: auto;
border: 1px solid green;
background-color: #eee;

で相対位置を設定する必要はありませんtd。理由を聞かないでください。おそらく、私よりも知識のある人でしょう。

いずれにせよ、これにより、以下を許可しながら、強制的に拡張して一定量のスペースを埋めることができます。

表示されるフッター。
存在するパディング (技術的にはパディングではない場合でも)。
クロスブラウザ環境で動作するこのソリューション。

これが役立つことを本当に願っています。そうでない場合は、もう一度試してみてください。

アップデート

あなたはJavaScriptはあなたがやりたい方法ではないと言いましたが、実際に問題を解決するjQueryを使用した短い解決策があります:

更新されたフィドル

$('td > div').each(function() {
    var t = $(this);
    var text = t.html();
    t.hide();
    t.height(t.parent().height());
    t.show(text);
});

これが機能する理由:

100% の高さが機能する前に、その親のdiv高さが定義されている必要がありますが、これはすべて動的コンテンツであると既に述べているため、これはオプションではありません。問題ない。divブラウザがすでにレンダリングした後に、計算された高さをにプッシュする jQuery が必要なだけです。簡単ですよね？

まあ、それほど速くはありません。Div は、少なくとも理想的には、表のセルによって区切られることを意図していません。には、論理的な別個のコンテナーとして機能するものが既にあります。は、の高さが何であるかをあまり気にしませんtd。そして、その高さを照会すると、実際の高さに関係なく、含まれる要素よりも大きいと報告されます。そのため、を空にした行をコメントアウトした後でフィドルを見ると、が誤って高さ約 900 ピクセルであることが報告されていることがわかります。divtdtddivtd

どうしようか？

では、そのコンテンツをから取り除きdivます。今ではただの殻であり、あらゆる状況でコンテナよりも小さくなります. これは、クエリを実行したときにサイズを誤って報告すること~~について嘘~~tdをつかないことを意味します。

そして、TD から真実を取得したら、divその親が報告したサイズが必要なサイズであることをに伝え、その内容を返します。

出来上がり。これでdiv、実際にその親を尊重するができました。本当の子供だけがそんなに簡単だったら。

score 2 · Accepted Answer

HTML テーブルの基本的な動作

これは、小さなコンテンツと特大のコンテンツがテーブルの幅と高さにどのように影響するかを示すデモです。テーブルの横に灰色の定規があり、テーブルの意図した寸法を示しています。デモのスタンドアロンバージョン。

テーブルセル内の非常に大きな可変サイズコンテンツのスクロールは、垂直方向にはある程度機能するように見えますが、水平方向にはまったく機能しないようです。

高さについては、ブラウザーごとに 3 つの異なる結果があります。

テーブル全体の高さは適正です。これは、Chrome および Safari (Webkit ブラウザー) で発生します。
コンテンツ行はテーブル全体の意図した高さを占め、フッター行はテーブルに追加の高さを追加するため、テーブルが意図したよりも少し高くなります。これは、Firefox と Opera、および標準モードの IE7/8/9/10 で発生します (ただし、IE では、フッターセルがフッターコンテンツの高さよりも高く、テーブルにかなりの高さが追加されます)。
コンテンツ行の高さ全体がスクロールバーなしで表示されるため、テーブルが意図したよりもはるかに高くなります。これは、Quirks モードの IE7/8/9/10 で発生します。

幅については、結果はすべてのブラウザーで #3 に匹敵します (コンテンツの幅全体が常にスクロールバーなしで表示されます)。

CSS の妥協

可能なように見える CSS ソリューションに最も近いのは、固定の高さを設定し#element-in-question(ただし、スクロール可能にします)、フッターの高さを変更できるようにすることです。テーブルの全体的なサイズは、さまざまなフッターの高さが大きく異なりますが、さまざまです。フッターの高さの差が小さい場合、またはテーブル全体の高さが常に同じであることが重要でない場合、これは妥当な妥協点となる可能性があります。

質問に投稿された CSS は次のようになります (#element-in-question平均または最も一般的なフッターの高さと組み合わせた場合に最適であると判断された高さを示します)。

#parent { width:500px; position:absolute; }
#container { width:100%; }
#element-in-question { height:450px; width:100%; overflow: auto; }
#footer-cell { }
#footer { }

上記の変更を使用して、質問に投稿されたデモの更新バージョンを次に示します (テスト済み: IE7/8/9/10 標準および Quirks モード、Firefox、Chrome、Safari、Opera)。古いバージョンの IE で JSFiddle を実行する際に問題がある場合は、このデモのスタンドアロンバージョンを試してください。

Web サイトのデザインは、HTML テーブルの限界を超えているようです。設計に何らかの制約を課すことができない場合 (ここで説明したものなど)、これには JavaScript または jQuery が必要になるようです。

score 0 · Accepted Answer

これには回避策があります。tbodyタグはFirefoxに自動的に追加されるため、問題が発生します。height:100%あなたtdとあなたに追加しheight:90%ますtbody。tbodyタグは存在しなかったので、cssで追加する必要があります。

table tbody{height:90%}

ライブデモ

html - 高さが100％でオーバーフローする要素

3 に答える 3

Related

Reference