3

不明な数の自己サイズ調整段落と、おそらく他の要素を含む固定サイズのコンテナーがあります。その内容の後に表もあります。コンテナの残りの高さをテーブルで埋める必要があります。

私は次のHTMLを持っています:

​<div id="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis. Sed semper dui sed ante. Sed luctus tincidunt nisl. Proin iaculis adipiscing nisl. Class aptent taciti sociosqu ad litora amet.</p>
    <p>Lorem ipsum dolor sit amet, consectetur cras amet.</p>
    <table>
        <thead>
            <tr>
                <th>One</th>
                <th>Two</th>
                <th>Three</th>
                <th>Four</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>111</td>
                <td>222</td>
                <td>33333</td>
                <td>4444</td>
            </tr>
            <tr>
                <td>111</td>
                <td>222</td>
                <td>33333</td>
                <td>4444</td>
            </tr>
            <tr>
                <td>111</td>
                <td>222</td>
                <td>33333</td>
                <td>4444</td>
            </tr>
            <tr>
                <td>111</td>
                <td>222</td>
                <td>33333</td>
                <td>4444</td>
            </tr>
        </tbody>
    </table>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

次の CSS を使用します。

#container {
    width: 500px;
    height: 500px;
    background: red;
}

p {
    margin-bottom: 20px;
}

table {
    height: 100%;
    width: 100%;
}

table,
table th,
table td{
    border: 1px solid black;
}

これを行うと、テーブルは残りの領域だけでなく、コンテナーの高さを取得します。CSS でコンテナと子を table と table-row として設定しようとしましたが、他の要素が大きすぎるか、マージン内で緩んでいます。

フィドルはhttp://jsfiddle.net/QLwkU/にあります。

これに対する純粋な CSS ソリューションを期待していましたが、合理的で再利用可能な jQuery ソリューションであれば問題ありません。

私はもう試した：

var totalHeight = 0;
$('#container').children(':not(table)').each(function(){
    totalHeight += $(this).outerHeight(true);
});
$('#container table').css({'height': ($('#container').outerHeight() - totalHeight)});

しかし、これにより、テーブルに余白が必要になった場合にそれを追加することがやや難しくなります。

ご意見やご提案をいただければ幸いです。

4

5 に答える 5

1

OK、提案してくれてありがとう。このために、ニーズに合わせて少し変更したバージョンを使用して、物事をもう少し動的にします。テーブルにマージンを使用する場合に備えて、テーブルの外側のサイズと内側のサイズの差を計算に追加しました。

$('#container table').css('height', (
    $('#container').height() -
    $('#preTableContainer').outerHeight(true) -
    ($('#container table').outerHeight(true) -
     $('#container table').height())
));

と変更されたcss

#container {
    width: 500px;
    height: 500px;
    background: red;
}

#preTableContainer {
    overflow: hidden;
}

p {
    margin-bottom: 20px;
}

table {
    width: 100%;
    margin-bottom: 20px;
}

table,
table th,
table td{
    border: 1px solid black;
}

HTMLは、テーブル以外のコンテンツが独自のdivでラップされているだけで同じです。

働くフィドル：

http://jsfiddle.net/QLwkU/10/

すべての提案をありがとう。うまくいけば、新しいCSS3ボックスモデルがこれをより簡単なプロセスにするでしょう。

于 2012-08-01T15:37:02.797 に答える
1

純粋なcssでこれを行う方法はわかりませんが、jQueryでこれを行う簡単な方法があります。

最初にテーブルの前にあるすべてのコンテンツを別のラッパーにラップし、次にその高さを固定の高さ（この場合は500）から差し引くと、テーブルの高さがわかります。

tmpHeight = $("#container").height() - $(".nonTableContainer").height();
$('table').css('height',tmpHeight+"px");

これがフィドルです：http：//jsfiddle.net/QLwkU/7/

また、元々、段落の下に20pxの余白がありました。非テーブルコンテナの高さを適切に取得するには、マージンをパディングに変更するか、jQueryコードのtmpHeightから20を引くだけです。上記のフィドルでは、マージンをパディングに変更しました。

于 2012-07-31T22:14:25.527 に答える
0

この種のものが欲しいのですが、テーブルの境界線がそれを拡張しています。

http://jsfiddle.net/QLwkU/9/

ボーダーの高さの合計を計算し、その合計を myTableHeight 変数から差し引くには、さらにコードが必要になります。

于 2012-07-31T22:19:38.327 に答える
-1

http://jsfiddle.net/QLwkU/8/この方法を試してください。テーブルの前にいくつかのdivを設定し、彼にある程度の高さ（この場合は30％）を与えます。そして、テーブルの高さを70％にします。したがって、div + table =コンテナの100％になります。次に、必要な新しいdiv要素を挿入できます。

于 2012-07-31T22:16:35.197 に答える
-1

同じ問題があり、純粋なcssを使用して解決しました。

したがって、コンテンツを含むコンテナがあり、そのコンテナ内にテーブルを追加し、そのコンテナの残りの高さをテーブルで埋めたい場合は、単純に高さを 100% に設定します。これは、テーブルがコンテナの残りのすべてのスペース。

<div id="container" style="height:200px">
Some random content 
<table style="height:100%;background-color:blue;"><tr><td>Test 1</td></tr></table>

</div>

詳細については、こちらをご覧ください: http://jsfiddle.net/tonyawad88/StTAr/

于 2013-01-31T04:20:07.127 に答える