2pxの幅と背景色が空のdivは100％の高さで表示されません

Question

私は3列のテーブルを持ち、1列目と3列目は100％の高さと背景色FFで正常に動作しますが、ChromeやIEでは動作しません。

今、私はdivタグでテーブルを置き換えますが、空のdivは表示されません。以下は、私は何を使用するのが混乱しているので、多くのことを試したサンプルコードです。 CSS Gurusの助けが必要です。

.PageLine2V 
    { 
     width:2px; 
     content: ""; 
     min-height: 100%; 
     background-color:#D1C094; 
     background-image:url('../images/gold-line-2v.gif'); 
     background-repeat:repeat-y; 
    } 
<table height="100%"> 
     <td width="60px" valign="top" align="center" > 
     <div class="PageLine2V"></div> 
     </td> 
</table> 

私はこの空のdivショーアップを作成し、テーブルの高さに成長することができますどのように確認していないにも

Answer 1

.PageLine2V 
    { 
     width:2px; 
     content: ""; 
     min-height: 100%; 
     background-color:#D1C094; 
     background-image:url('../images/gold-line-2v.gif'); 
     background-repeat:repeat-y; 
     height: 100%; 

    } 

divの100％

の高さを与えるもで何かを追加divはコンテンツなしでレンダリングされないスペースなどです。

<table height="100%"> 
     <td width="60px" valign="top" align="center" > 
     <div class="PageLine2V">&nbsp;</div> 
     </td> 
</table> 

Answer 2

ポジションを与える：絶対; http://jsfiddle.net/eg6DP/

これは左端に表示されていますが、表示されている間はその位置にも表示されます。

Answer 3

高さを100％に設定するには、親に明示的に定義された高さが必要です。 height: 100%をtd（divの親）に追加します。テストし、jsfiddleで作業しています。

Answer 4

.PageLine2V 
{ 
    width:2px; 
    content: ""; 
    min-height: 100%; 
    background-color:#D1C094; 
    background-image:url('../images/gold-line-2v.gif'); 
    background-repeat:repeat-y; 
    height: 35px; /* As required */ 
    display:inline-block; 

} 

これがうまくいきます。私が試したように、同じコードを固定高さでピクセル単位で使用し、display:inline-block;を追加しました。次に、さらなる高さのために親の高さパラメータを調整してみてください。