Foros del Web » Creando para Internet » CSS »

Problema con Height 100%

 Estas en el tema de Problema con Height 100% en el foro de CSS en Foros del Web. Hola que tal, Estoy maquetando una web en la que necesito hacer el alto de mi div contenido sea dinámico liquido ... no se como ...
  #1 (permalink)  
Antiguo 31/05/2012, 23:37
 
Fecha de Ingreso: septiembre-2006
Mensajes: 22
Antigüedad: 18 años, 2 meses
Puntos: 0
Problema con Height 100%
Hola que tal,

Estoy maquetando una web en la que necesito hacer el alto de mi div contenido sea dinámico liquido ... no se como le llamen xD pero el hecho es que su altura debe tener el tamaño del contenido, supuestamente esto bastaría con usar height al 100% pero no, el texto se desborda y el div no crece mas, espero haberme explicado bien, aquí les dejo el código tanto del index como de la pagina interna.

Aqui como se ve

http://i183.photobucket.com/albums/x312/Tiefnuker/img2.jpg
http://i183.photobucket.com/albums/x312/Tiefnuker/img1.jpg

Código HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="encabezadoP">
<div id="encabezado">
    <div id="menuP">
        <ul>
        <li><a href="index.html" class="home" title="home">home</a></li>
        <li><a href="informacion.html" class="informacion" title="informacion">informacion</a></li>
        <li><a href="plan.html" class="planDeViaje" title="planDeViaje">planDeViaje</a></li>
        <li><a href="conferencistas.html" class="conferencistas" title="conferencistas">programa</a></li>
        <li><a href="comite.html" class="comiteOrganizador" title="comiteOrganizador">comiteOrganizador</a></li>
        <li><a href="programa.html" class="programa" title="programa">programaCientifico</a></li>
        <li><a href="contacto.html" class="contacto" title="contacto">contacto</a></li>
        </ul>
    </div>
    <div id="encabezadoImagen">
    	<div id="logo">
        </div>
    </div>
</div>
</div>

<div id="contenidoP">
<div id="contenidoC">    
<div id="contenido">	
	<div id="leftCol">
  		<div id="colTitle">TÍTULO 1</div>
        <div id="seccion">
        <img src="imagenes/imagen.png" width="113" height="112" id="leftColCont" />
        <div id="texto">
	        <p>Lorem ipsum ad his scripta blandit partiendo</p>
    	    <p>Lorem ipsum ad his scripta blandit partiendo</p>
        </div>
        </div>
        <div id="seccion">
        <img src="imagenes/imagen.png" width="113" height="112" id="leftColCont" />
        <div id="texto">
	        <p>Lorem ipsum ad his scripta blandit partiendo</p>
    	    <p>Lorem ipsum ad his scripta blandit partiendo</p>
        </div>
        </div>
        <div id="seccion">
        <img src="imagenes/imagen.png" width="113" height="112" id="leftColCont" />
        <div id="texto">
        	<p>Lorem ipsum ad his scripta blandit partiendo</p>
        	<p>Lorem ipsum ad his scripta blandit partiendo</p>
        </div>
        </div>        
    </div>
    <div id="midCol">
    </div>
    <div id="rightCol">
        <div id="colTitle">Lorem ipsum ad his scripta blandit partiendo</div>
        <h4 id="rightColCont">Lorem ipsum ad his scripta blandit partiendo</h4>        
        <p id="rightColCont">Lorem ipsum ad his scripta blandit partiendo</p>
        <img src="imagenes/imagen.jpg" width="490" height="150" id="rightColCont" />        
    </div> 
</div>   
</div>
</div>

<div id="llamasCont">
    <div id="llamas">
    </div>
</div>
<div id="pieP">
<div id="pie">
	<div id="logosOrg">
    	<img src="imagenes/imagen.jpg" width="60" height="70" />
        <img src="imagenes/imagen.jpg" width="60" height="70" />
        <img src="imagenes/imagen.jpg" width="60" height="70" />
    </div>
    <p>Lorem ipsum ad his scripta blandit partiendo</p>
</div>
</div>

</body>
</html>
Pagina interna:

Código HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="encabezadoP">
<div id="encabezado">
    <div id="menuP">
        <ul>
        <li><a href="index.html" class="home" title="home">home</a></li>
        <li><a href="informacion.html" class="informacion" title="informacion">informacion</a></li>
        <li><a href="plan.html" class="planDeViaje" title="planDeViaje">planDeViaje</a></li>
        <li><a href="conferencistas.html" class="conferencistas" title="conferencistas">programa</a></li>
        <li><a href="comite.html" class="comiteOrganizador" title="comiteOrganizador">comiteOrganizador</a></li>
        <li><a href="programa.html" class="programa" title="programa">programaCientifico</a></li>
        <li><a href="contacto.html" class="contacto" title="contacto">contacto</a></li>
        </ul>
    </div>
    <div id="encabezadoImagenInt">
    	<div id="logoMin">
        </div>
    </div>
</div>
</div>

<div id="contenidoP">
<div id="contenidoC">    
<div id="contenido">
	<div id="colTitleInt">
    INFORMACION
    </div>
	<div id="leftColInt">El alto de este div debe adaptarse al contenido
    </div>
    <div id="rightColInt">
    	<img src="imagenes/imagen.jpg" width="250" height="234" id="rightColIntImg"/>
        <img src="imagenes/imagen.jpg" width="250" height="234" id="rightColIntImg"/>       
    </div>
</div>   
</div>
</div>

<div id="llamasCont">
    <div id="llamas">
    </div>
</div>
<div id="pieP">
<div id="pie">
    <div id="logosOrg">
    	<img src="imagenes/imagen.jpg" width="60" height="70" />
        <img src="imagenes/imagen.jpg" width="60" height="70" />
        <img src="imagenes/imagen.jpg" width="60" height="70" />
    </div>
    <p>
    Lorem ipsum ad his scripta blandit partiendo, eum fastidii a
    </p>
</div>
</div>

</body>
</html>

Espero que me puedan ayudar con esto, me llevo matando dos dias y no consigo solucionarlo ·_·

Gracias.
  #2 (permalink)  
Antiguo 31/05/2012, 23:40
 
Fecha de Ingreso: septiembre-2006
Mensajes: 22
Antigüedad: 18 años, 2 meses
Puntos: 0
Respuesta: Problema con Height 100%
Aquí dejo el css, disculpen el doble post pero no me dejaba escribir mas en el anterior.

Código HTML:
body{
	background-image:url(imagenes/body_bg.jpg);
	background-repeat:no-repeat;	
}
body,html{
	margin:0;
	padding:0;
	height:100%;
}
#encabezadoP{
	width:100%;	
}
#encabezado{
	width:960px;	
	margin:auto;
}
	#menuP{
		width:960px;
		height:50px;
		background-image:url(imagenes/lineas_separadoras.png);
		background-repeat:no-repeat;
	}
	#encabezadoImagen{
		width:960px;
		height:553px;
		background-image:url(imagenes/congreso_tituloP.png);
		background-position:center;
		background-repeat:no-repeat;
	}
#contenidoP{
	width:100%;
	height:100%;	
}
#contenidoC{
	width:960px;
	height:100%;
	margin:auto;
	background-image:url(imagenes/contenido_bg.jpg);
	background-repeat:repeat-y;		
}	
	#contenido{
		width:900px;
		height:100%;		
		margin:auto;
		background-image:url(imagenes/motivos_bg.jpg);
		background-repeat:repeat-y;				
	}
		#leftCol{			
			width:325px;
			height:100%;
			float:left;			
		}
			#seccion{
				width:309px;
				margin-top:25px;
				margin-left:17px;
				height:112px;							
			}
				#seccion img{
					float:left;									
				}
				#seccion #texto{
					float:left;
					width:179px;
					padding-left:8px;					
				}
				#seccion p{												
					font-family:Arial, Helvetica, sans-serif;
					font-size:14px;
					color:#3c3c3c;					
					margin:0px;
				}
				#seccion p+p{
					font-family:Arial, Helvetica, sans-serif;
					font-size:12px;				
					color:#787878;
				}
		#midCol{
			margin-left:14px;
			margin-right:15px;
			margin-top:70px;
			width:1px;
			height:85%;
			background:#000;						
			float:left;
			
		}
		#rightCol{
			width:545px;
			height:100%;
			float:left;							
		}
			#rightCol div{
				width:528px;
				height:31px;
			}			
			#rightColCont{
				margin-left:17px;
				margin-right:40px;
				font-family:Arial, Helvetica, sans-serif;				
				color:#6b0000;				
			}
			p#rightColCont{
				font-size:12px;
				line-height:19px;
				color:#858585;
			}
			h4#rightColCont{
				font-size:14px;
				margin-top:25px;
				margin-bottom:10px;
			}
#colTitle{				
	background-image:url(imagenes/titulo2_bg.jpg);
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	padding-top:15px;
	padding-left:17px;	
	color:#FFF;
	width:309px;
	height:31px;			
}
#pieP{
	width:100%;
	height:110px;
	background-image:url(imagenes/pie_bg.jpg);
	background-repeat:repeat-x;		
}
#pie{
	margin-left:auto;
	margin-right:auto;
	width:960px;
	height:100%;	
	text-align:center;
}
	#pie p{			
		font-family:Arial, Helvetica, sans-serif;
		font-size:14px;
		color:#FFF;
		margin:0px;		
		padding-top:10px;			
	}
	 #logosOrg{
		width:210px;
		height:70px;
		margin:auto;
		padding-top:10px;		
	 }
	 	#logosOrg img{
			width:60px;
			height:inherit;
			margin-left:5px;
			margin-right:5px;
			float:left;
		}
#llamasCont{
	width:100%;
	height:74px;
}
#llamas{
	width:960px;
	height:74px;	
	background-repeat:no-repeat;
	background-image:url(imagenes/llamas.png);		
	margin:auto;
}
#logo{
	width:300px;
	height:136px;
	background-image:url(imagenes/logo.png);
	float:right;
	margin-right:40px;
	margin-top:40px;
}
/********************************************** PAGINA INTERNA *******************************************/
#leftColInt{
	width:566px;
	height:100%;	
	margin-left:27px;
	margin-right:15px;	
	float:left;
	margin-top:27px;
	font-family:Arial, Helvetica, sans-serif;
	color:#6b6b6b;
	font-size:13px;
	line-height:19px;
}
	leftColInt p{
		margin:0px;
		padding:0px;		
	}
#rightColInt{
	width:250px;
	height:100%;
	margin-left:15px;
	margin-right:27px;	
	float:left;
	margin-top:27px;
}
	img#rightColIntImg{
		margin-bottom: 27px;
	}
#colTitleInt{
	background-image:url(imagenes/barraTituloInt.png);
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	padding-top:15px;
	padding-left:17px;	
	color:#FFF;
	width:883px;
	height:31px;	
}
#encabezadoImagenInt{
		width:960px;
		height:250px;
		background-image:url(imagenes/congreso_tituloInt.png);
		background-position:center;
		background-repeat:no-repeat;
	}
#logoMin{
	width:200px;
	height:91px;
	background-image:url(imagenes/logoMin.png);
	float:right;
	margin-right:40px;
	margin-top:40px;
}
  #3 (permalink)  
Antiguo 01/06/2012, 07:29
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 5 meses
Puntos: 539
Respuesta: Problema con Height 100%
Use el buscador (el del foro o cualquier otro) y pregunte por la cadena de texto:
"limpiar float"
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Etiquetas: contenido, height, html, tamaño
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 03:56.