Foros del Web » Creando para Internet » CSS »

height liquido en divs

Estas en el tema de height liquido en divs en el foro de CSS en Foros del Web. Hola, soy nuevo en el foro y de verdad espero encontrar a alguien que pueda ayudarme ya que en ningun otro lado lo he encontrado. ...
  #1 (permalink)  
Antiguo 07/11/2008, 08:05
 
Fecha de Ingreso: noviembre-2008
Mensajes: 8
Antigüedad: 9 años, 1 mes
Puntos: 0
height liquido en divs

Hola, soy nuevo en el foro y de verdad espero encontrar a alguien que pueda ayudarme ya que en ningun otro lado lo he encontrado.
El asunto es que necesito que un div que esta dentro de otro tenga un alto que se ajuste al navegador, la supuesta solucion sería que el height sea 100%, lo mismo al div que lo contiene y lo mismo al body, hasta ahi vamos bien (por lo menos en IE).
El problema es que dentro del div que contiene al div en cuestion hay otro div (arriba) con un height especifico en pixeles, entonces, si bien el div que quiero que sea liquido lo es y toma al alto de la ventana, al documento dse le agrega el alto del div con alto fijo y me genera un scroll inecesario.
Me explico? Creo que es muy confuso.
De todas maneras lo que necesito es una manera de tratar los altos de los divs más libre, más parecido al comportamiento de una tabla.
Si alguien tiene una solución, se lo agradeceré eternamente.
  #2 (permalink)  
Antiguo 07/11/2008, 08:59
 
Fecha de Ingreso: agosto-2006
Mensajes: 191
Antigüedad: 11 años, 4 meses
Puntos: 3
Respuesta: height liquido en divs

Bueno, seguramente es una chapucilla paro tal vez te valga:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Prueba</title>
<style type="text/css">
	*{margin:0;padding0;}
	html,body{height:100%;}
	#contenedor{position:relative; width:100%; height:100%; background-color:#0000ff;}
	#arriba{position:absolute; width: 90%; height: 100px; background-color: #ff0000; z-index: 50;}
	#debajo{position:absolute; width: 95%; height: 100%; background-color: #00ff00;}
	p.primerparrafo{margin-top: 110px;}
</style>
</head>
<body>

<div id="contenedor">
	<div id="arriba"></div>
	<div id="debajo"><p class="primerparrafo">El texto se escribirá debajo del DIV "arriba"</p></div>
</div>


</body>
</html> 
__________________
El mejor consejo lo da la experiencia, aunque este siempre llega tarde.
Cacharreando con Joomla
  #3 (permalink)  
Antiguo 07/11/2008, 09:53
 
Fecha de Ingreso: noviembre-2008
Mensajes: 8
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: height liquido en divs

Gracias Trutxof, en realidad eso es lo que estoy haciendo, con las diferencias debidas de atributos.

Este es el html resumido:

Cita:
<body>
<div id="fondo" >
<div id="header">
</div>
<div id="conte">
<h1>titulo 1</h1>
Contenido
</div>
</div>
</body>
Y este es el css:

Cita:
body,td,th {
color: #838383;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

body {
background-color: #FFFFFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
height:100%;
}

#fondo {
background-image: url(img/fondo.jpg);
background-repeat: repeat-y;
background-position:center;
text-align: center;
height:100%;

}


#header {
background-image:url(img/header.jpg);
width: 843px;
height:216px;
background-repeat: no-repeat;
background-position:center;
margin:auto;
}

#conte {
width: 534px;
text-align: left;
margin:auto;
padding-right:198px;
padding-left:111px;
height:100%;
}

h1{
color: #838383;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight:bold;
}
En IE logro que el div "fondo" y "conte" tengan una altura del 100%, no así en otros navegadores. Pero de todas formas, en IE, el documento me queda mas alto que la ventana, supongo que es por que el div "fondo" tiene el alto de "conte" que es 100% más el alto de "header" que es 216px. No se.
Cualquier comentario sirve, gracias
  #4 (permalink)  
Antiguo 08/11/2008, 05:42
 
Fecha de Ingreso: agosto-2006
Mensajes: 191
Antigüedad: 11 años, 4 meses
Puntos: 3
Respuesta: height liquido en divs

Si le hechas un vistazo más detenido al código que te he dado verias algunas diferencias.
No obstante le he hecho algunas modificaciones al tuyo, pruebalo....

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Prueba</title>
<style type="text/css">
*{margin:0;padding:0}
html{height:100%;}
body,td,th {
color: #838383;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
background-color: #FFFFFF;
margin:0;
height:100%;
}
#fondo {
background-image: url(img/fondo.jpg);
background-repeat: repeat-y;
background-position:center;
height:100%;
}
 
#header {
position:absolute;
background-image:url(img/header.jpg);
background-repeat: no-repeat;
background-position:center;
width: 843px;
height:216px;
left:50%;
margin-left:-421px;
z-index:50;
}
#conte {
position:absolute;
width: 534px;
text-align: left;
margin:auto;
padding-right:198px;
padding-left:111px;
height:100%;
left:50%;
margin-left:-421px;
}
h1{
color: #838383;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight:bold;
margin:220px 0 0 0;
}
</style>
</head>
<body>
<div id="fondo" >
<div id="header">
</div>
<div id="conte">
<h1>titulo 1</h1>
Contenido
</div> 
</div>
</body>
</html> 
Esta vez solo he podido probarlo en IE7, pero supongo funcionará
__________________
El mejor consejo lo da la experiencia, aunque este siempre llega tarde.
Cacharreando con Joomla
  #5 (permalink)  
Antiguo 10/11/2008, 11:03
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 10 años, 1 mes
Puntos: 4
Respuesta: height liquido en divs

Metele a eso unos cuantos parafos de texto.

Prueba esto si pasas por aquí

Código:
<style type="text/css">
body {
	color: #838383;
	font-family: Arial, Helvetica, sans-serif;
	margin-right: 3%;
	margin-left: 3%;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	background: #000066;
}
p {
	margin-top: 0px;
	padding-top: 2%;
	padding-right: 2%;
	padding-bottom: 2%;
	padding-left: 2%;
	margin-bottom: 0px;
}
#contenedor {
	width: 100%;
	background: #FFFFFF;
	display: block;
}
 
#header {
	background: #996633;
	padding-bottom: 10%;
	float: left;
	width: 100%;
	display: block;
}
img {
}
#conte {
	width: 100%;
	background: #993300;
	display: block;
	float: left;

	
}
.pie {
	clear: both;
	width: 100%;
	padding-top: 2%;
	padding-bottom: 7%;
	background: #99FF66;
	float: left;
}
h1{
	color: #838383;
	padding-top: 3%;
	padding-bottom: 1%;
	font: bold 3em Arial, Helvetica, sans-serif;
	padding-left: 2%;
}
</style>
Código HTML:
<body>
<div id="contenedor" ><!--Tu capa fondo-->
<div id="header"></div>
<div id="conte">
  <h1>titulo 1</h1>
<p align="justify">
Lorem ipsum dolor sit amet, nullam fusce curabitur nulla sed, adipiscing facilisis justo a. Justo rhoncus at fringilla vestibulum at, montes adipiscing diam mauris, ut non mus vel erat. Tortor aenean. Odio eu eros velit quis praesent porttitor, phasellus sem praesent ut. Adipiscing ac cubilia elit ac, convallis semper senectus ultricies. Lectus duis lacinia elementum, viverra ut rerum odio eleifend tellus consectetuer, pede sit nec, posuere aliquam aenean cursus id, interdum urna enim magna nulla ultricies.</p>

</div>
</div>
<div class="pie"></div> 
</body> 

Última edición por talmente; 10/11/2008 a las 12:35
  #6 (permalink)  
Antiguo 10/11/2008, 14:37
Avatar de Dansolo  
Fecha de Ingreso: junio-2007
Mensajes: 16
Antigüedad: 10 años, 6 meses
Puntos: 1
De acuerdo Respuesta: height liquido en divs

intenta agregando un float a "#fondo" y "#conte"
Código:
float:left;
clear:both;
Espero funcione...
  #7 (permalink)  
Antiguo 11/11/2008, 13:37
 
Fecha de Ingreso: noviembre-2008
Mensajes: 8
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: height liquido en divs

Muchas gracias trutxof, me ha funcionado perfecto en todos los navegadores que he probado. Solo he tenido problemas con un estilo que andaba en el medio pero ya lo estoy solucionando.
Gracias a los demás también.
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 08:21.