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>'s 的祖先一些值。

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;
}​