Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de ¿Div al ancho completo de web o a 1024x768? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/03/2011, 12:42
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 9 años, 6 meses
Puntos: 2
¿Div al ancho completo de web o a 1024x768?

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!
  #2 (permalink)  
Antiguo 13/03/2011, 14:11
Avatar de mtreik  
Fecha de Ingreso: marzo-2011
Ubicación: Yecla (Murcia)
Mensajes: 41
Antigüedad: 6 años, 9 meses
Puntos: 7
Respuesta: ¿Div al ancho completo de web o a 1024x768?

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:
Ver original
  1. body{
  2.         margin:0px 0px 0px 0px;
  3. }
  4.  
  5. #div_ancho_completo{
  6.         width:100%;
  7. }
__________________
Marcelo López Santa
------------------------
Diseñador y programador web
www.sixtudio.com
  #3 (permalink)  
Antiguo 01/04/2011, 06:42
Avatar de gran Wakka  
Fecha de Ingreso: septiembre-2007
Mensajes: 712
Antigüedad: 10 años, 3 meses
Puntos: 48
Respuesta: ¿Div al ancho completo de web o a 1024x768?

Es otra pregunta, pero esta relacionada... para el ancho perfecto. ¿Como se haría para la altura?
__________________
Información de Series de TV
Buscas o quieres ser redactor? Ofertas redactor web
  #4 (permalink)  
Antiguo 01/04/2011, 06:49
Avatar de mtreik  
Fecha de Ingreso: marzo-2011
Ubicación: Yecla (Murcia)
Mensajes: 41
Antigüedad: 6 años, 9 meses
Puntos: 7
Respuesta: ¿Div al ancho completo de web o a 1024x768?

Para la altura sería exactamente lo mismo pero indicando height:100%; es decir:
Código CSS:
Ver original
  1. body{
  2.  
  3. margin:0px 0px 0px 0px;
  4.  
  5. }
  6.  
  7. #div_altura_pantalla{
  8.  
  9. height:100%;
  10.  
  11. }
__________________
Marcelo López Santa
------------------------
Diseñador y programador web
www.sixtudio.com
  #5 (permalink)  
Antiguo 01/04/2011, 07:09
Avatar de gran Wakka  
Fecha de Ingreso: septiembre-2007
Mensajes: 712
Antigüedad: 10 años, 3 meses
Puntos: 48
Respuesta: ¿Div al ancho completo de web o a 1024x768?

Cita:
Iniciado por mtreik Ver Mensaje
Para la altura sería exactamente lo mismo pero indicando height:100%; es decir:
Código CSS:
Ver original
  1. body{
  2.  
  3. margin:0px 0px 0px 0px;
  4.  
  5. }
  6.  
  7. #div_altura_pantalla{
  8.  
  9. height:100%;
  10.  
  11. }
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>
__________________
Información de Series de TV
Buscas o quieres ser redactor? Ofertas redactor web
  #6 (permalink)  
Antiguo 01/04/2011, 07:15
Avatar de mtreik  
Fecha de Ingreso: marzo-2011
Ubicación: Yecla (Murcia)
Mensajes: 41
Antigüedad: 6 años, 9 meses
Puntos: 7
Respuesta: ¿Div al ancho completo de web o a 1024x768?

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.
__________________
Marcelo López Santa
------------------------
Diseñador y programador web
www.sixtudio.com
  #7 (permalink)  
Antiguo 01/04/2011, 07:46
Avatar de gran Wakka  
Fecha de Ingreso: septiembre-2007
Mensajes: 712
Antigüedad: 10 años, 3 meses
Puntos: 48
Respuesta: ¿Div al ancho completo de web o a 1024x768?

Quería hacerlo mediante estilos. :(

Ahí te va un poco de karma por la ayuda.
__________________
Información de Series de TV
Buscas o quieres ser redactor? Ofertas redactor web
  #8 (permalink)  
Antiguo 01/04/2011, 08:00
Avatar de mtreik  
Fecha de Ingreso: marzo-2011
Ubicación: Yecla (Murcia)
Mensajes: 41
Antigüedad: 6 años, 9 meses
Puntos: 7
Respuesta: ¿Div al ancho completo de web o a 1024x768?

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:
Ver original
  1. //Primero llamamos a jquery (es mucho más sencillo realizar cualquier cosa)
  2. <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
  3.  
  4. <script language="JavaScript">
  5. $(document).ready(function(){
  6. //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.
  7.         $(".div_altura_pantalla").css("height",screen.height);
  8.  
  9. });
  10.  
  11.  
  12. </script>

Si te animas pruébalo que te podría venir muy bien para solucionar tu problema.
Y gracias por el karma =)
__________________
Marcelo López Santa
------------------------
Diseñador y programador web
www.sixtudio.com
  #9 (permalink)  
Antiguo 01/04/2011, 09:41
Avatar de gran Wakka  
Fecha de Ingreso: septiembre-2007
Mensajes: 712
Antigüedad: 10 años, 3 meses
Puntos: 48
Respuesta: ¿Div al ancho completo de web o a 1024x768?

Es un proyecto en el que no me dejan usar javascript.
__________________
Información de Series de TV
Buscas o quieres ser redactor? Ofertas redactor web
  #10 (permalink)  
Antiguo 01/04/2011, 10:38
Avatar de mtreik  
Fecha de Ingreso: marzo-2011
Ubicación: Yecla (Murcia)
Mensajes: 41
Antigüedad: 6 años, 9 meses
Puntos: 7
Respuesta: ¿Div al ancho completo de web o a 1024x768?

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
__________________
Marcelo López Santa
------------------------
Diseñador y programador web
www.sixtudio.com
  #11 (permalink)  
Antiguo 04/04/2011, 03:08
Avatar de gran Wakka  
Fecha de Ingreso: septiembre-2007
Mensajes: 712
Antigüedad: 10 años, 3 meses
Puntos: 48
Respuesta: ¿Div al ancho completo de web o a 1024x768?

Cita:
Iniciado por mtreik Ver Mensaje
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.
__________________
Información de Series de TV
Buscas o quieres ser redactor? Ofertas redactor web
  #12 (permalink)  
Antiguo 04/04/2011, 14:31
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: ¿Div al ancho completo de web o a 1024x768?

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
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #13 (permalink)  
Antiguo 04/04/2011, 14:56
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.823
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: ¿Div al ancho completo de web o a 1024x768?

Cita:
Iniciado por gran Wakka Ver Mensaje
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>
Cita:
Iniciado por mtreik Ver Mensaje
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.
Cita:
Iniciado por daPhyre Ver Mensaje
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:
Ver original
  1. 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*/
  2. #contenedor{width:100%;height:100%;}
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #14 (permalink)  
Antiguo 04/04/2011, 19:13
Avatar de OmarV  
Fecha de Ingreso: febrero-2010
Mensajes: 82
Antigüedad: 7 años, 10 meses
Puntos: 3
Respuesta: ¿Div al ancho completo de web o a 1024x768?

Yo lo resolvi perfectamente con este css, intentalo ;)
Código:
body{
	margin:0px;
}
.class{
	background:red;
	height:100%;
	width:100%;
	display:block;
}

Etiquetas: ancho, completo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:47.