utilizando sólo CSS, es posible crear un div que cubre toda el área de contenido del documento exactamente?

StackOverflow https://stackoverflow.com/questions/908103

  •  05-09-2019
  •  | 
  •  

Pregunta

Me pregunto si es posible utilizar sólo CSS Javascript pero no al estilo de un DIV que cubrirá toda el área de contenido exactamente? (Nota: El contenido entero, no sólo el área de visualización). No parece posible porque el elemento tiene cierto margen, y parece que no hay manera fácil de peinar el div para incluir que la anchura del margen y la altura del elemento de cuerpo. Pero, de hecho, es posible?

Actualizar : lo siento, es un requisito que no podemos establecer el margen de a 0 ... (Actualización 2: decir, si tenemos que hacerlo en una biblioteca y pueden 't pedir a todas las personas que lo utilizan para fijar el cuerpo para tener margen de 0)

¿Fue útil?

Solución

Si el margen se establece, entonces no podrías usar un margen negativo en los

para anular las etiquetas márgenes? Entiendo márgenes pueden variar entre los navegadores. Si el tiene un margen de 10px, a continuación, el estilo de su div este modo: 

div#mydiv {
margin: -10px;
}

Se podría utilizar el mismo principio para anular el relleno (si es aplicable).

Otros consejos

Por supuesto, creo.

márgenes predeterminados Restablecer: 

* { margin: 0; padding: 0; }

entonces para 

<div id="shader"></div>

do: 

#shader {position: absolute; width: 100%; height: 100%; min-height: 100%; top: 0; left: 0;}

Esta es probablemente una solución, pero no va a trabajar en el IE ... 

div.cover { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; }

Como es lógico, esto es imposible. Su DIV tiene que ir dentro del cuerpo, no en el exterior.

O, para decirlo de otra manera, que pidió todo el "área de contenido" para estar cubierto, pero eso no es realmente lo que quiere, desea que todo el cuerpo esté cubierto.

Lazlow tiene la mejor sugerencia. Tal vez establecer los márgenes negativos / relleno para algo grande para que pueda estar seguro de que es más grande que el valor por defecto del navegador, a continuación, tienen un div interior con el mismo margen de los valores / de relleno único positivo?

Sí. que acaba de establecer el relleno y el margen de la etiqueta del cuerpo a 0, entonces se establece el relleno y el margen de la etiqueta div a cero.

¿qué pasa con esto? 

<div style="position:absolute;left:0px;top:0px;width:100%;height:100%;">...

Me gustó la respuesta de Ambrose. El cuerpo es contenedor definitiva para su HTML. No he visto ningún márgenes en el cuerpo con Mozilla, Chrome, IE, Opera - versiones actuales. Para demostrarlo: el estilo
body {background-color: amarillo;} / * y echar un vistazo. * /

En cualquier caso, siempre es una buena práctica para normalizar los navegadores de ajuste para el margen, relleno, etc a cero! como Dmitri Farkov anteriormente

Creo que no hay manera de hacer que el div "flotar" sobre su navegador, si sería así, entonces la tecnología podría superar su pantalla, algo así como el cuerpo style = "margin: -40px" - si esto sangrar en su escritorio?

Y, por cierto, html estilo es anormal, ¿qué hacer a continuación? estilo, ?? En cualquier caso, ellos están allí por lo que podría definir estilos en todos ellos, pero no creo que sería mucho más inteligente.

No sé si esto podría ayudar a: 

<div style="margin:-100%">

Pero dudo que esto se puede superar la ventana del navegador ...

Creo que el enfoque de MiffTheFox es la mejor, ya que su solución cubre la situación en la que otros divs tiene posicionamiento absoluto. Recuerde que los elementos de posicionamiento absoluto apagan el flujo, y si cualquier elemento se coloca por ejemplo en la parte superior: 9000px, la altura del cuerpo no será> 9000px

. 
<style type="text/css">
    #superdiv{ position:fixed; top:0; left:0; width:100%; height:100%; }
</style>

<div id="superdiv">
    Put some content here.
</div>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top