0

これはFirefoxとChromeで動作します：

<div id="popup" style="display: block;">
        <div id="contentWrapper">

            <div id="popHeader">
                <span id="popupQuestion">The  nature.</span>
                <a id="popupYes" href="#"> </a>
                <a id="popupNo" href="/">Leave</a>
            </div>
        </div>
    </div>


#contentWrapper {
background-image: url("http://bestcamctory.com/images/warning/warning_bg.png");
height: 100%;
position: relative;
width: 100%;
}

しかし、つまり、背景画像は表示されません。何故ですか？

4

2 に答える 2

1

contentWrapperIIRC では、またはdiv のサイズを定義する必要がある場合がありますpopup。

于 2012-12-04T13:06:26.087 に答える
1

子要素が絶対的に配置#contentWrapperされている場合は、ドキュメントの通常のフロー内に高さを伝える要素がないため、折りたたまれています。Aheight: 100%は相対的です: 要素はその親と同じ高さだけになり、デフォルトではその子要素と同じ高さになります (現在は 0)。

これを回避するには、いくつかの方法があります。

  • 最小の高さを追加します#contentWrapper(最初は 1em を試してください)
  • 1 つまたはすべての子要素から絶対配置を削除します。

height: 100%各祖先要素に追加することもできます。

于 2012-12-04T13:15:06.803 に答える