Quiero hacer que un div se ajuste al alto y ancho inicial de la pantalla de un usuario.Hacer un ajuste div en la pantalla inicial
Creo que el siguiente diagrama toscamente dibujado a explicar esto mejor:
#div
{
width: 100%;
height: 100%;
}
no parece trabajar
Si he entendido bien (hay algunos espacio para la confusión aquí):
#screenFiller {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 15px solid orange
}
es posible que después de la versión position: fixed: http://jsfiddle.net/zRpNp/1/
Sí, funciona! Sin embargo, ¿crees que funcionaría en todos los navegadores desde IE8 + – jonnnnnnnnnie
? Definitivamente lo hará. – thirtydot
Gracias, confirmó: http://browsershots.org/http://jsfiddle.net/zRpNp/ – jonnnnnnnnnie
Ajuste su altura a 100% en un div sólo significa que su div llenará el 100% de su contenedor; no el 100% de la página.
Sugeriría que desee utilizar una declaración de min-height en su div o su contenedor o usar JavaScript para encontrar la altura inicial de la pantalla del usuario (porque todos tendrán algo ligeramente diferente) y configurarlo como un estilo en línea en tu div.
Código algo en la línea de la siguiente devolverá las dimensiones de la pantalla:
var x,y;
if (self.innerHeight) // all except Explorer
{
x = self.innerWidth;
y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
x = document.documentElement.clientWidth;
y = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
x = document.body.clientWidth;
y = document.body.clientHeight;
}
+1 para el reconocimiento de que la altura = 100% es relativa al contenedor principal que se debe establecer de forma explícita. -1 por no usar una solución de CSS puro usando las propiedades de posición para establecer los 4 lados como lo propuso thirtydot. –
<html><body style="margin: 0;">
<div style="height: 100%; width: 100%; background: #ccc;">a</div>
<div style="background: #777;height: 100%; width: 100%">b</div>
</body>
</html>
funciona para mí
Usted puede hacer esto por completo con CSS también:
html, body {
margin: 0;
padding: 0;
min-height: 100%;
width: 100%;
}
div {
height: 100%;
width: 100%;
}
Su estilo CSS está buscando id="div", no una etiqueta div. Esto debería funcionar asumiendo que su div en parented por el <body> u otro 100%, 100% elemento html:
<div id="fullViewPort">
My Content
</div>
#fullViewPort {
width: 100%;
height: 100%;
}
<style>
body {
margin:0;
padding:0;
}
#try {
height:100%;
width:100%;
margin:0;
padding:0;
clear:both;
}
#next {
height:10%;
}
</style>
<body>
<div id="try">hello1</div>
<div id="next">hello2</div>
</body>
trabaja para mí.
otra manera de hacer esto sólo con CSS ...
http://jsfiddle.net/pxfunc/qQ45K/
html, body {height:100%;} /* explicitly set html & body height */
#fillScreen {
position:relative;
top:0;
left:0;
height:100%;
width:100%;
}
Creo que esta es la manera más fácil ... al permitir que el navegador dice que la altura ... usando java script
`
<html>
<head>
<title>viewport</title>
<style type="text/css">
* { padding:0; margin:0; }
#test { background:#aaa; height:100%; width:100%; }
</style>
<script type="text/javascript">
window.onload = function() {
var height = getViewportHeight();
alert("This is what it looks like before the Javascript. Click OK to set the height.");
if(height > 0)
document.getElementById("test").style.height = height + "px";
}
function getViewportHeight() {
var h = 0;
if(self.innerHeight)
h = window.innerHeight;
else if(document.documentElement && document.documentElement.clientHeight)
h = document.documentElement.clientHeight;
else if(document.body)
h = document.body.clientHeight;
return h;
}
</script>
</head>
<body>
<div id="test">
<h1>Test</h1>
</div>
</body>
</html>`
Personalmente me gusta la pura CS Solución S Simplemente use la unidad vh.
#filldiv
{
height: 100vh;
}
Eso hará que el div llene el alto de la ventana del navegador.
Además, también puede hacer que llene el ancho de la ventana del navegador, esto sólo se utiliza la unidad vw.
#filldiv
{
width: 100vw;
}
Ambos se muestran en this fiddle
Realmente personalmente me gusta tanto de estas unidades, ya que pueden ser utilizados para cambio de tamaño dinámico de las cosas tales como tamaños de fuente.
¿cómo harías ancho en vez de alto? –
@GmanSmith Voy a actualizar la respuesta muy rápido. – Tinfoilboy
@Tinfoilboy ¡Esto es realmente elegante! ¿Sabes cómo se rompe en los navegadores no compatibles? – Dionysis
hay al menos un centenar de preguntas similares ya en SO ... – Shad