Foros del Web » Creando para Internet » CSS »

width: 100%

Estas en el tema de width: 100% en el foro de CSS en Foros del Web. Consulta, tengo un simple div que quiero que siempre ocupe el 100% del navegador pero lo que me pasa es que cuando la ventana del ...
  #1 (permalink)  
Antiguo 04/09/2011, 20:32
 
Fecha de Ingreso: junio-2011
Mensajes: 477
Antigüedad: 6 años, 5 meses
Puntos: 13
Pregunta width: 100%

Consulta, tengo un simple div que quiero que siempre ocupe el 100% del navegador pero lo que me pasa es que cuando la ventana del navegador esta maximizada totalmente no hay problema pero al restaurarla al punto de que aparezca el scroll horizontal este div se corta, es decir en lo que se ve en la ventana restaurada dicho div ocupa siempre el ancho de la ventana pero al mover el scroll hacia la derecha me encuentro con que el div esta cortado. Espero que se entienda. Pongo algo de código para que lo prueben. Como lo soluciono? Gracias.

Código:
body, html {
	margin: 0;
	padding: 0;
	min-height:100%;
	min-width:100%;
	height: 100%;
}
#linea{
	height:30px;
	width:100%;
}
  #2 (permalink)  
Antiguo 04/09/2011, 21:07
 
Fecha de Ingreso: agosto-2011
Ubicación: Montevideo
Mensajes: 44
Antigüedad: 6 años, 2 meses
Puntos: 5
Respuesta: width: 100%

Es extraño lo que estás diciendo, no sé que navegador usas pero por ejemplo en Mozilla si achico la ventana, el width que está al 100% sige ocupando el 100% de la ventana y el scroll no deja moverlo porque de todas formas está al 100% y no mas largo que eso.
  #3 (permalink)  
Antiguo 04/09/2011, 21:32
 
Fecha de Ingreso: junio-2011
Mensajes: 477
Antigüedad: 6 años, 5 meses
Puntos: 13
Respuesta: width: 100%

Gracias por responder.
Uso Chrome, pero lo probe tanto en FF como en IE, Safari y Opera y en todos sucede lo mismo. Quizas no estoy explicando bien lo que me sucede. :S
  #4 (permalink)  
Antiguo 04/09/2011, 21:35
 
Fecha de Ingreso: junio-2011
Mensajes: 477
Antigüedad: 6 años, 5 meses
Puntos: 13
Respuesta: width: 100%

Agrego algo para que se entienda mejor, luego de achicar la ventana de tal forma que aparezca el scroll horizontal y muevo dicho scroll hacia la derecha el ancho del div es el de la ventana y al hacer scroll desde ese ancho hacia la derecha aparece cortado.
  #5 (permalink)  
Antiguo 04/09/2011, 23:21
Avatar de Tedel  
Fecha de Ingreso: enero-2011
Ubicación: Lima
Mensajes: 2.728
Antigüedad: 6 años, 10 meses
Puntos: 442
Respuesta: width: 100%

si quieres eso no uses width sino position:

div id="cualquiercosa" style="position: absolute; (o relative, lo que necesites) left: 0; right: 0;"

fin.
__________________
Soy el autor de Heptagrama y tengo un servicio "todo incluido" de marketing web.
  #6 (permalink)  
Antiguo 04/09/2011, 23:27
 
Fecha de Ingreso: junio-2011
Mensajes: 477
Antigüedad: 6 años, 5 meses
Puntos: 13
Respuesta: width: 100%

Gracias por contestar, pero poniéndolo así también pasa.
Saludos.
  #7 (permalink)  
Antiguo 04/09/2011, 23:40
 
Fecha de Ingreso: junio-2011
Mensajes: 477
Antigüedad: 6 años, 5 meses
Puntos: 13
Respuesta: width: 100%

Gracias por contestar
  #8 (permalink)  
Antiguo 05/09/2011, 08:58
 
Fecha de Ingreso: junio-2011
Mensajes: 477
Antigüedad: 6 años, 5 meses
Puntos: 13
Respuesta: width: 100%

Alguna otra sugerencia?
  #9 (permalink)  
Antiguo 05/09/2011, 22:09
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 4 meses
Puntos: 1567
Respuesta: width: 100%

Hay que ver si entendí bien

poniendo exactamente esto , que en definitiva es tu código

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <style type="text/css">
  7. body, html {
  8.     margin: 0;
  9.     padding: 0;
  10.     min-height:100%;
  11.     min-width:100%;
  12.     height: 100%;
  13. }
  14. #linea{
  15.     height:30px;
  16.     width:100%;
  17.     background-color: cyan;
  18. }
  19.  
  20. </head>
  21. <div id="linea">xxxxxx</div>
  22. </body>
  23. </html>

El problema que planteas no se produce, el div se redimensiona segun se achique o agrande la ventana, si le agrego mas texto, y achico al máximo la ventana, ni siquiera se produce scroll, sino que el texto del desborda el div por deajo de los 30px.


Supongo que habría que analizar el contenido total del html y de lo que el div contenga

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: ancho, html, width
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 21:33.