height liquido en divs

juanchones · #1 (**permalink**) 07/11/2008, 08:05

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.

Trutxof · #2 (**permalink**) 07/11/2008, 08:59

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>

juanchones · #3 (**permalink**) 07/11/2008, 09:53

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

Trutxof · #4 (**permalink**) 08/11/2008, 05:42

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á

talmente · #5 (**permalink**) 10/11/2008, 11:03

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>

Dansolo · #6 (**permalink**) 10/11/2008, 14:37

intenta agregando un float a "#fondo" y "#conte"

Código:

float:left;
clear:both;

Espero funcione...

juanchones · #7 (**permalink**) 11/11/2008, 13:37

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.