width: 100%

rapuig · #1 (**permalink**) 04/09/2011, 19:32

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%;
}

Elfede171 · #2 (**permalink**) 04/09/2011, 20:07

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.

rapuig · #3 (**permalink**) 04/09/2011, 20:32

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

rapuig · #4 (**permalink**) 04/09/2011, 20:35

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.

Tedel · #5 (**permalink**) 04/09/2011, 22:21

si quieres eso no uses width sino position:

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

fin.

rapuig · #6 (**permalink**) 04/09/2011, 22:27

Gracias por contestar, pero poniéndolo así también pasa.
Saludos.

rapuig · #7 (**permalink**) 04/09/2011, 22:40

Gracias por contestar

rapuig · #8 (**permalink**) 05/09/2011, 07:58

Alguna otra sugerencia?

emprear · #9 (**permalink**) 05/09/2011, 21:09

Hay que ver si entendí bien

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

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html {
    margin: 0;
    padding: 0;
    min-height:100%;
    min-width:100%;
    height: 100%;
}
#linea{
    height:30px;
    width:100%;
    background-color: cyan;
}
 
</style>
</head>
<body>
<div id="linea">xxxxxx</div>
</body>
</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