高さのパーセンテージが表示で正しく機能しないのはなぜですか？table-cell？

私はdivを水平方向と垂直方向の両方に集中させようとしています。外側のdivは、特定の幅と高さが高さのパーセンテージが表示で正しく機能しないのはなぜですか？table-cell？

#countdownBox { 
    width: 700px; 
    height: 500px; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}

のようにピクセル単位で設定しているとき、それは動作しますが、高さと幅が

#countdownBox { 
    width: 100%; 
    height: 100%; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}

のような割合である場合には、なぜこれが失敗し、仕事が周りにあるのでしょうか？ここで

EDITは、コンテナのCSSとHTMLである：あなたが100％の幅と高さを持っているという事実に基づいて

#countdownBoxContainer { 
width: 100%; 
height: 100%; 
position: absolute; 
bottom: 0; 
left: 0; 
z-index: 3; 
} 

<div id="countdownBoxContainer"> 
    <div id="countdownBox"> 
     <div> 
     hi there 
     </div> 
    </div> 
</div>

出典

2012-01-04 zakdances

HTMLの外観はどうですか？幅と高さのパーセンテージ（通常）は、含まれている要素に設定された寸法がないと機能しません。 – HackedByChinese

がHTMLを追加しました。コンテナの親のサイズは同じです。 – zakdances

は、私はあなたが誰にもに期待していないと仮定するつもりだと宣言しましたここでスクロールする必要があります。 See this Fiddleここで私はそれらのパラメータに基づいて実際の解決策を持っています。

はdisplay: table-cell;が正確<td>要素のように機能し、彼らは<table>（またはdisplay: table;あるコンテナ）でない限り、彼らは正しくレンダリングされないことに注意してください。

もう1つの問題は、コンテンツが非常に小さい場合、必ずしも画面の高さであるとは限りません。<html>と<body>は必ずしも画面の高さではありません。 html, body { height: 100%; }はこれを修正していますが、ちょっとハッキリです。

出典

2012-01-04 02:50:43

これは動作します、ありがとうございます。しかし、要素の位置を絶対に保つために、私はdisplay：table divを含むさらに別の外部ラッパーを追加しなければなりませんでした。これは、要素を中心に配置するdivの3つのレイヤーを持っていることを意味します... ...不器用なようです。 – zakdances

なぜコンテナを絶対配置する必要がありますか？ –

他のdivと重複する必要があるためです。 – zakdances

高さのパーセンテージが表示で正しく機能しないのはなぜですか？table-cell？

答えて

関連する問題