Foros del Web » Creando para Internet » CSS »

height div problema

Estas en el tema de height div problema en el foro de CSS en Foros del Web. estoy desarrollando un sitio web y me surgio el problema que no puedo lograr que 2 de mis divs ocupen la totalidad del contenido , ...
  #1 (permalink)  
Antiguo 17/02/2011, 10:12
 
Fecha de Ingreso: marzo-2010
Mensajes: 35
Antigüedad: 7 años, 9 meses
Puntos: 1
height div problema

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
  #2 (permalink)  
Antiguo 17/02/2011, 13:19
 
Fecha de Ingreso: febrero-2011
Ubicación: Evolandia
Mensajes: 103
Antigüedad: 6 años, 10 meses
Puntos: 10
Respuesta: height div problema

ya intentaste con

min-height:100%;
height: auto!important;
height:100%;
  #3 (permalink)  
Antiguo 17/02/2011, 14:49
 
Fecha de Ingreso: julio-2010
Mensajes: 28
Antigüedad: 7 años, 4 meses
Puntos: 2
Respuesta: height div problema

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

Última edición por Mxrck; 17/02/2011 a las 14:55
  #4 (permalink)  
Antiguo 17/02/2011, 15:04
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: height div problema

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.
  #5 (permalink)  
Antiguo 17/02/2011, 15:12
 
Fecha de Ingreso: marzo-2010
Mensajes: 35
Antigüedad: 7 años, 9 meses
Puntos: 1
Respuesta: height div problema

Cita:
Iniciado por omarMusic Ver Mensaje
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 .
  #6 (permalink)  
Antiguo 17/02/2011, 15:17
 
Fecha de Ingreso: marzo-2010
Mensajes: 35
Antigüedad: 7 años, 9 meses
Puntos: 1
Respuesta: height div problema

Cita:
Iniciado por sanxuan Ver Mensaje
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?
  #7 (permalink)  
Antiguo 17/02/2011, 15:31
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: height div problema

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
  #8 (permalink)  
Antiguo 17/02/2011, 15:46
 
Fecha de Ingreso: marzo-2010
Mensajes: 35
Antigüedad: 7 años, 9 meses
Puntos: 1
Respuesta: height div problema

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.
  #9 (permalink)  
Antiguo 17/02/2011, 15:51
 
Fecha de Ingreso: julio-2010
Mensajes: 28
Antigüedad: 7 años, 4 meses
Puntos: 2
Respuesta: height div problema

Cita:
Iniciado por sanxuan Ver Mensaje
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.
  #10 (permalink)  
Antiguo 17/02/2011, 16:04
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: height div problema

Lo que te explicaba era esto:
Código HTML:
Ver original
  1.  <head>
  2.     <title>Ejemplo sombra paralela</title>
  3.     <LINK rel="stylesheet" href="estilo01.css" type="text/css" media="all">
  4.  </head>
  5. <div id="contenedor">
  6.   <div id="sombra-izquierda">
  7.     <div id="sombra-derecha">
  8.       <div id="cuerpo"></div>
  9.     </div>
  10.   </div>
  11. </div>
  12. </body>
  13. </html>
Código CSS:
Ver original
  1. body {
  2.         background-color:#1232aa;
  3. }
  4. #contenedor{width:1000px;
  5.     margin:0 auto;
  6. }
  7. #cuerpo {
  8.         background-color:#FFFFFF;
  9.         min-height:500px;
  10. }
  11. #sombra-izquierda{
  12.         background-color:transparent;/* esta propiedad no es necesaria */
  13.         background-image:url('izq.png');
  14.         background-repeat:repeat-y;
  15.         background-position:left;
  16. }
  17. #sombra-derecha{
  18.         background-image:url('der.png');
  19.         background-repeat:repeat-y;
  20.         background-position:right;
  21. }
No voy a estar aquí siempre para hacer los deberes. Espero no tardar en encontrar tareas más productivas.

Etiquetas: height
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 20:17.