html - 単純なjsfiddleの例が機能しない

Question

このようにたくさんの質問があることは知っていますが、それ以上に何を書けばいいのかわかりません。これは私のフィドルです：http：//jsfiddle.net/CnJF5/2/

HTML：<div id="myDiv" ></div>

CSS：

#myDiv
{
    background-color:black;
    width:100%;
    height:100%;
}

このフィドルはどのようにdivして穴のページの上にあり、黒いものを作ることができますか？

Answer 1

その div がページ全体を占めるようにする場合は、すべての親要素も同様にheight設定する必要があります。100%

body, html {
    height:100%
}

#hider
{
    background-color:black;
    width:100%;
    height:100%;
}

JSFiddle: http://jsfiddle.net/CnJF5/8/

Answer 2

設定する必要があります

body, html {
    height: 100%
}

親の高さが固定されている場合、要素はパーセンテージの高さのみを尊重します。

• http://www.tutwow.com/htmlcss/quick-tip-css-100-height/
• http://jsfiddle.net/CnJF5/11/

Answer 3

何の100％？widthとのデフォルト値heightは ですauto。黒いページが必要な場合は、<div>の先祖にもいくつかの値を与える必要があります。

html, body {
    width:100%;
    height:100%;
}

Answer 4

これを試してください... http://jsfiddle.net/CnJF5/12/

#myDiv {
    z-index: 10000;
    filter: alpha(opacity=50); /*older IE*/
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
    -moz-opacity: .50; /*older Mozilla*/
    -khtml-opacity: 0.5;   /*older Safari*/
    opacity: 0.5;   /*supported by current Mozilla, Safari, and Opera*/
    background-color:#000000;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    text-align:center;
    vertical-align:middle;
}​