height div problema

podmaster · #1 (**permalink**) 17/02/2011, 10:12

estoy desarrollando un sitio web y me surgio el problema que no puedo lograr que 2 de mis divs ocupen la totalidad del contenido , cree un efecto de sombra paralela en ambos lados del cuerpo del sitio , para ejemplificar seria algo asi como <div id="con la sombra paralela izquierda"><div id="cuerpo"><div id="con la sombra derecha"> estos estan contenidos en otros 2 divs en donde hay otros efectos de imagen etc el asunto es que todos tienen definido como height:100% llene de contenido un div del cuerpo para que este se estire mucho pero los divs que son sombras paralela no lo hacen solo lo hacen lo que ocupa la ventana del navegador se que ese es el resultado del 100% pero como puedo hacer que ocupe la totalidad del contenido de la pagina porque con auto no me sucede nada ademas la altura de los otros 2 divs contenedores y del body estan definidos como 100%

les dejo una imagen de mi problema ( no dejo el codigo porque es mucho y la hoja de estilo es aun mas larga)(el efecto de sombra paralela lo logre con un background-repeat-y )

ojala se les ocurra cual podria ser el problema no hace mucho que empece con css

omarMusic · #2 (**permalink**) 17/02/2011, 13:19

ya intentaste con

min-height:100%;
height: auto!important;
height:100%;

Mxrck · #3 (**permalink**) 17/02/2011, 14:49

Tengo exactamente el mismo problema y no he encontrado forma de resolverlo

las capas amarillas son donde irán las sombras, pero no puedo hacer que ocupen toda la pantalla cuando el contenido de la pagina genera un scroll, lo mismo con el div rojo deberia alargarse segun el contenido.

el verde y el azul son float para que puedan quedar en la misma linea

sanxuan · #4 (**permalink**) 17/02/2011, 15:04

Si el ancho de la página es fijo, resulta mejor solución incluir las sombras en el fondo de la etiqueta <body>. Una imagen de unos pocos píxeles de alto y la propiedad background-repeat:repeat-y hacen el resto.

Otra posibilidad es incluir unos divs dentro de otros de modo que el más largo de ellos obligue a otros a tener su tamaño.
Por brevedad uso tres divs:
<div id="sombraIzqda">
<div id="sombraDcha">
<div id="pagina"> ... cabecera, cuerpo,..., pie... </div>
</div>
</div>
La imagen de las sombras se incluye como fondo del div correspondiente repitiéndose en este caso en vertical (serviría igual en caso de quererla en horizontal). Debemos añadir en el div de la sombra un padding derecho o izquierdo, según el caso, con el ancho de la sombra para que el contenido respete el fondo y no lo oculte.

podmaster · #5 (**permalink**) 17/02/2011, 15:12

Cita:

Iniciado por omarMusic

ya intentaste con

min-height:100%;
height: auto!important;
height:100%;

Lo intente pero no funciono

y es tal cual como le pasa a mxrck con otros divs tambien me pasa , ademas de las sombras .

podmaster · #6 (**permalink**) 17/02/2011, 15:17

Cita:

Iniciado por sanxuan

Si el ancho de la página es fijo, resulta mejor solución incluir las sombras en el fondo de la etiqueta <body>. Una imagen de unos pocos píxeles de alto y la propiedad background-repeat:repeat-y hacen el resto.

Otra posibilidad es incluir unos divs dentro de otros de modo que el más largo de ellos obligue a otros a tener su tamaño.
Por brevedad uso tres divs:
<div id="sombraIzqda">
<div id="sombraDcha">
<div id="pagina"> ... cabecera, cuerpo,..., pie... </div>
</div>
</div>
La imagen de las sombras se incluye como fondo del div correspondiente repitiéndose en este caso en vertical (serviría igual en caso de quererla en horizontal). Debemos añadir en el div de la sombra un padding derecho o izquierdo, según el caso, con el ancho de la sombra para que el contenido respete el fondo y no lo oculte.

No puedo incluir la imagen como background del body porque ya hay otra imagen ocupandolo , mi sombra paralela es un div con una imagen repetida en Y , pero no entiendo lo que quiciste decir con esos 3 divs , mi html basicamente se organiza en <div id=sombra izquierda ></div><div id=cuerpo ></div><div id=sombra derecha ></div> por lo que asi cada uno queda bien alineado si pongo la sombra derecha dentro del div de la sombra izquierda como los alineo para que queden fuera del div de cuerpo?

sanxuan · #7 (**permalink**) 17/02/2011, 15:31

Complemento la información que te proporcioné antes. Se me pasó por alto el uso de la propiedad background-position. Para la sombra derecha debes usar el valor right y para la izquierda el valor left. Además debes usar un padding como te expliqué antes.
Éste método lo he detallado mejor en esta página: http://www.cocemfeweb.zobyhost.com/recuadros.html

podmaster · #8 (**permalink**) 17/02/2011, 15:46

perdon pero no lo logro comprender , es que como ya dije no hace mucho que empece y me pierdon con los ejemplos muy largos . para explicarme mejor , cree un html y una hoja de estilo que es basicamente mi problema.

les dejo tambien las imagenes que uso como sombra paralela.

descarguenlas aqui:(tienen 1px de alto asi que si no la pueden ver no se preocupen)

http://s582.photobucket.com/albums/ss266/podmasterfoto/?action=view&current=der.png

http://s582.photobucket.com/albums/ss266/podmasterfoto/?action=view&current=izq.png

HTML:

Código HTML:

<html>
 <head>
	
	<title>Ejemplo sombra paralela</title>
	<LINK rel="stylesheet" href="estilo01.css" type="text/css" media="all">
 </head>
<body>
<div id="contenedor">
<div id="sombra-derecha"></div>
<div id="cuerpo">a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br></div>
<div id="sombra-izquierda"></div>


</div>

</body>
</html>

La hoja de estilo.

Código HTML:

body {background-color:#1232aa;
	height:100%;}

#contenedor{width:1000px;
	margin:0px auto 0px auto;
	height:100%;}

#cuerpo {background-color:#FFFFFF;
	width:600px;
	height:100%;;
	float:right;}



#sombra-izquierda
{background-color:transparent;
background-image:url('izq.png');
background-repeat:repeat-y;
background-position:right;
width:170px;
	height:100%;;
	float:right;}



#sombra-derecha
{background-color:transparent;
background-image:url('der.png');
background-repeat:repeat-y;
background-position:left;
width:170px;
	height:100%;;
	float:right;}

hagan la prueba creen un html copien el codigo y la hoja de estilo nombrenla estilo01.css coloquen las 2 imagenes y fijense.

Mxrck · #9 (**permalink**) 17/02/2011, 15:51

Cita:

Iniciado por sanxuan

Complemento la información que te proporcioné antes. Se me pasó por alto el uso de la propiedad background-position. Para la sombra derecha debes usar el valor right y para la izquierda el valor left. Además debes usar un padding como te expliqué antes.
Éste método lo he detallado mejor en esta página: [url]http://www.cocemfeweb.zobyhost.com/recuadros.html[/url]

Ya habia pensado lo que has propuesto, si se mira de hecho en la imagen que puse, lo tenia tal como podmaster dvi sombra div contenido (header, contenido, footer...) div sombra.

Y momentaneamente asi lo he puesto, pero no queria ponerlo asi por si se presentaba la posibilidad de necesitar usar una imagen de fondo al body, por eso sigo pensando sobre lo de la altura.

sanxuan · #10 (**permalink**) 17/02/2011, 16:04

Lo que te explicaba era esto:

Código HTML:

Ver original<html>
 <head>
    <title>Ejemplo sombra paralela</title>
    <LINK rel="stylesheet" href="estilo01.css" type="text/css" media="all">
 </head>
<body>
<div id="contenedor">
  <div id="sombra-izquierda">
    <div id="sombra-derecha">
      <div id="cuerpo"></div>
    </div>
  </div>
</div>
</body>
</html>

Código CSS:

Ver originalbody {
        background-color:#1232aa;
}
#contenedor{width:1000px;
    margin:0 auto;
}
#cuerpo {
        background-color:#FFFFFF;
        min-height:500px;
}
#sombra-izquierda{
        background-color:transparent;/* esta propiedad no es necesaria */
        background-image:url('izq.png');
        background-repeat:repeat-y;
        background-position:left;
}
#sombra-derecha{
        background-image:url('der.png');
        background-repeat:repeat-y;
        background-position:right;
}

No voy a estar aquí siempre para hacer los deberes. Espero no tardar en encontrar tareas más productivas.