divを含むtdの高さを一致させる方法は？

私はテーブルの行に沿って3つの「パネル」を配置しています。 1つは他の2つよりも背が高く、私は3つすべてのパネルを最も高いものの高さに一致させたい。私は高さ：100％のdivをスタイリングしようとしましたが、短いパネルは、含まれているtdsが成長しても、短くなります。divを含むtdの高さを一致させる方法は？

私のHTMLはJSFによって生成されているため、フォームの制御は制限されていますが、スタイルを変更できます。私は以下のコードを単純化しました。 IE8とFirefoxで同じ問題が発生します。しかし、IE8では短いパネルがtdの上端に垂直にレンダリングされますが、Firefoxでは中央にレンダリングされます。これらの

<html> 
<head> 
    <title>Test Table</title> 
    <style TYPE="text/css"> 
     td {border: 1px solid red; padding: 1px;} 
     .panel {border: 1px solid blue; padding: 1px;height:100%} 
     .panel-header{background-color: green; color: white;} 
     .panel-body {border: 1px solid green; padding: 1px; height:100%;} 
    </style> 
</head> 
<body> 
    <h1>Test Table</h1> 
    <table width="100%"> 
    <tbody> 
     <tr> 
      <td> 
       <div class="panel" style="height:200px;"> 
        <div class="panel-header"> 
        Header One 
        </div> 
        <div class="panel-body"> 
        Body One 
        </div> 
       </div> 
      </td> 
      <td> 
       <div class="panel" style="height:100%;"> 
        <div class="panel-header"> 
        Header Two 
        </div> 
        <div class="panel-body"> 
        Body Two 
        </div> 
       </div> 
      </td> 
      <td> 
       <div class="panel"> 
        <div class="panel-header"> 
        Header Three 
        </div> 
        <div class="panel-body"> 
        Body Three 
        </div> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
    </table> 

</body> 
<html>

出典

2011-02-07 Greg Charles

私はjQueryでこれを行う方法を投稿に追加しました。私はそれが助けて欲しい！ –

あなたは絶対的な配置で行うことができます、[この回答を見てください（http://stackoverflow.com/a/33943557/1677209）。 – T30

5年後のことですので、私が作成していた実際のページに対してテストすることはできませんが、フィドルを試してみると、申し訳ありませんが、全く動作しません。あなたは私が直面していた問題を誤解しているかもしれません。いずれにしても、Richardが提案したjQueryソリューションはうまく機能しました。 –

tds（またはテーブル）の高さを明示的に指定せずに高さを100％に設定することはできません。 height:100%が有効になる前に、親要素に明示的な高さを指定する必要があるようです。おそらく、divコンテナの代わりにtdタグ自体にスタイルを変更することはできますか？

ではなく、中央の一番上にdivを揃えることができることができます場合、私はそれを行う方法の一例hereを（TDタグにvertical-align:top;を追加）しました。私はあなたがフォームの制御を制限していると言っていることは分かっていますが、divだけを使った例もありました。

1つの要素の最大高さを知っている場合は、表または表のセルをその高さ（つまり、height:200px;）に設定すると、100％をdivに適用する必要があります。

jQueryの使用に不都合がなければ、私の例であるhereを更新して、必要な処理を行いました。

出典

2011-02-07 20:39:39

Drackirは正しい;テーブルのTD要素は高さの値自体を指定しないので、高さの100％を要求する子要素はこれを計算できません.Drackirによると、TDの高さを手動で設定できます、OR ...それらの高さを100％として指定し、DIVの高さを100％として指定し、テーブルの高さを指定するか、またはテーブルに100％高さを適用することもできます。テーブルはその親要素から高さの値を取りますが、これは理想的ではないかもしれませんが、すべてのdivが特定のDIVにコンテンツを追加するのと同じ高さになるようにします。 – Nick

はい、テーブルには1行しかないのですが、実際のテーブルにはいくつかの行がありますが、td要素はサイズを変更する方法を知っていますが、その情報をdivに含めることはできません。サイズ変更を行うことができるスクリプトを作成し、パネルのonresに添付しますizeイベント。私はそれを働かせることができれば、私はここにそれを掲示するでしょう。（Big if！） –

@Greg Charles：jQueryを使用することに悪影響を及ぼさない場合は、自分の投稿にしたいものの例を追加しました。 –

height=100%; 
or 
height=inherit;

1つのトリック:)

出典

2011-02-07 20:15:48 Milaan

OPにはすでに「高さ：100％」と書かれています。「高さ：100％のdivをスタイリングしようとしましたが、短いパネルは短くなります。また、これらがCSSであると思われる場合は、等号の代わりにコロンを使用する必要があります。 –

おそらく私は質問を理解していない:)しかし、継承する必要がありますか...または彼はTDのスタイルを設定する必要があります（しかし、彼が望むものではありません）。そして、はい、あなたは '：'を使う必要があります。しかし、私は速く入力していた：$申し訳ありません:) – Milaan

私はあなたに知らせていました。答えを編集してコロンを追加することができます。 :)左下に編集リンクがあります。 –

私のソリューション実行する必要があります。http://jsfiddle.net/k6Dam/2/

は、インラインスタイルを取り外します（あなたがそれを行うことができることを望む）とのmin-heightパネルの設定を〜200pxまで

出典

2011-02-07 20:28:27 gearsdigital

私は問題は、1つのボディーが他のボディーの高さを超えて伸びることだと思います。この解決策は[ここ]（http://jsfiddle.net/Drackir/k6Dam/3/）を参照して解決されません。 –

@Drackirもちろん、このマークアップでは何の制限もなくこれを行うことはできません。彼はおそらく最初の要素の高さをjQuery/Javascriptで読み込み、与えられた値に基づいて高さを設定することができます。 – gearsdigital

うん。残念ながらそれが唯一の解決策かもしれません。 :( –

divを含むtdの高さを一致させる方法は？

答えて

関連する問題