¿Div al ancho completo de web o a 1024x768?

[kiM-]

Buenas, pués quisiera saber cuáles son las medidas exactas para que un div te ocupe todo el ancho de una web (ni un pixel más ni uno menos) en la resolución de 1024x768 o si hay algún otro método para que se ajuste a esa automaticamente o superiores. También quisiera saber cómo hacer para ocultar o cortar lo que sobre de un ancho de div entero.

Saludos y gracias de antemano!

[mtreik]

Veamos, para que un div ocupe el ancho completo de la pantalla, ya sea con la resolución que indicas o para cualquier otra basta con poner width:100%; aunque muchos navegadores dejan un margen automático. Para evitar esto en la etiquita body de tu archivo CSS añade la siguiente linea: margin:0px 0px 0px 0px;

Resumiendo se te quedaría algo parecido a lo siguiente:

Código CSS:

body{
        margin:0px 0px 0px 0px;
}
 
#div_ancho_completo{
        width:100%;
}
 

[gran Wakka]

Es otra pregunta, pero esta relacionada... para el ancho perfecto. ¿Como se haría para la altura?

[mtreik]

Para la altura sería exactamente lo mismo pero indicando height:100%; es decir:

Código CSS:

body{
 
margin:0px 0px 0px 0px;
 
}
 
#div_altura_pantalla{
 
height:100%;
 
}
 

[gran Wakka]

Iniciado por mtreik

Para la altura sería exactamente lo mismo pero indicando height:100%; es decir:

Código CSS:

body{
 
margin:0px 0px 0px 0px;
 
}
 
#div_altura_pantalla{
 
height:100%;
 
}
 

Si pongo eso que me dices, se ajusta el 100% al contenido, no me respeta que no supere el tamaño de pantalla.

Código:

<div style="overflow: none; height:100%;">
  <div>MENU</div>
  <div style="overflow: auto; height: 100%;"><div>
</div>

[mtreik]

Llevas razón, con eso solo se adapta a la altura que ocupa el contenido.

¿Has probado a realizarlo con Jquery? puedes realizar una función que te calcule la altura de la pantalla y que se la asigne como altura al div.
No es para nada complicado y te solucionaría el problema. Pruébalo.

[gran Wakka]

Quería hacerlo mediante estilos. :(

Ahí te va un poco de karma por la ayuda.

[mtreik]

Claro, si así podrías hacerlo con estilos, lo único que tendrías es una función en javascript que le asigna la altura. Te lo hago de una forma muy rápida pero sería algo así:

Código javascript:

//Primero llamamos a jquery (es mucho más sencillo realizar cualquier cosa)
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
 
<script language="JavaScript"> 
$(document).ready(function(){ 
//Esta linea obtiene la altura de la pantalla y se la aplica al atributo heidht de la clase CSS que se llama div_altura_pantalla.
        $(".div_altura_pantalla").css("height",screen.height);
 
});
 
 
</script>
 

Si te animas pruébalo que te podría venir muy bien para solucionar tu problema.
Y gracias por el karma =)

[gran Wakka]

Es un proyecto en el que no me dejan usar javascript.

[mtreik]

Uff! entonces ya, si es por "exigencias del guión" la cosa cambia. De todas formas investigaré un poco por si pudiese ayudarte que ahora a mi también me interesa saber como se podría hacer sin usar javascript jeje

[gran Wakka]

Iniciado por mtreik

Uff! entonces ya, si es por "exigencias del guión" la cosa cambia. De todas formas investigaré un poco por si pudiese ayudarte que ahora a mi también me interesa saber como se podría hacer sin usar javascript jeje

Eso es lo malo. Cuando te atan un poco las manos.

[daPhyre]

Aun CSS tiene límites que con muy poco JavaScript puede ser corregido.

Lo mejor siempre es hacer todo lo posible con CSS, y agregar esos pequeños detalles con JS para que quede "perfecto", pero aun si este está desactivado, quede lo más cercano a ello

[ArturoGallegos]

Iniciado por gran Wakka

Si pongo eso que me dices, se ajusta el 100% al contenido, no me respeta que no supere el tamaño de pantalla. <-- mi no entender

Código:

<div style="overflow: none; height:100%;">
  <div>MENU</div>
  <div style="overflow: auto; height: 100%;"><div>
</div>

Iniciado por mtreik

Llevas razón, con eso solo se adapta a la altura que ocupa el contenido.

¿Has probado a realizarlo con Jquery?puedes realizar una función que te calcule la altura de la pantalla y que se la asigne como altura al div. <-- para que queremos jquery cuando con css es posible?
No es para nada complicado y te solucionaría el problema. Pruébalo.

Iniciado por daPhyre

Aun CSS tiene límites que con muy poco JavaScript puede ser corregido. <-- que limites?

Lo mejor siempre es hacer todo lo posible con CSS, y agregar esos pequeños detalles con JS para que quede "perfecto", pero aun si este está desactivado, quede lo más cercano a ello

para obtener un ancho y altura al 100% deberás aplicar en tu css

Código CSS:

html,body{margin:0;padding:0;height:100%} /*es importante aplicar height:100% al body para que funcione al aplicar height:100% al div contenedor*/
#contenedor{width:100%;height:100%;}
 

[OmarV]

Yo lo resolvi perfectamente con este css, intentalo ;)

Código:

body{
	margin:0px;
}
.class{
	background:red;
	height:100%;
	width:100%;
	display:block;
}