El ejemplo simple de jsfiddle no funciona

I know that a lot of question are asked like this, but I don't know what to write either than that. This is my fiddle: http://jsfiddle.net/CnJF5/2/

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

CSS:

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

How can this fiddle make a div that is over the hole page and is black?

preguntado el 22 de mayo de 12 a las 20:05

There seems to be a question missing. -

@GolezTrol but but but there is a question mark in it -

4 Respuestas

If you want that div to take up the whole page you need all the parent elements to have height establecido en 100% también:

body, html {
    height:100%
}

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

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

contestado el 22 de mayo de 12 a las 20:05

Thank you! I must wait 5 minutes to set your answer as accepted answer. - user1365010

All the parents don't have to be necessarily 100%, they can be anything, they just have to have a set height. - Juan mendes

@JuanMendes is right, but if you want it to take up the whole page, they do. I'll edit my answer. - Bella

Just to be a PITA: they don't have to be set to 100%, you can set HTML to height:50% and then set your div to be height: 200% jsfiddle.net/CnJF5/34 :) - Juan mendes

Tienes que configurar 

body, html {
    height: 100%
}

Elements only respect percentage height if their parents have a fixed height.

contestado el 22 de mayo de 12 a las 20:05

100% of what? The default value for width y height is auto. If you want a black page you need to give the <div>'s ancestors some values also.

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

contestado el 22 de mayo de 12 a las 20:05

Prueba esto ... 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;
}​

contestado el 22 de mayo de 12 a las 20:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.