¿height 100%?

pzin · #1 (**permalink**) 28/06/2007, 18:25

Buenas.

Quiero que un contenedor baje hasta donde llegue el body y/o html. Le aplico el cien por cien al div, al body y al html, pero el div solo alcanza la parte visible, es decir, si le doy scroll, el div no crece hacia abajo.

¿Alguien sabe cómo solucionar esto?
He estado mirando éste tema, donde se asegura que haciéndolo como yo debería de funcionar, pero nada.
Luego mirando otro tema, dicen que es debido a que los div que hay en el contenedor tienen el float, pero poniendo un clear:both después de estos div, tampoco pasa nada.

zegga · #2 (**permalink**) 28/06/2007, 19:24

Pues es algo sencillo, solo debes hacer lo siguiente. en tu archivo css o en la cabecera del documento, declaras html y body con un height de 90 o 95 por ciento, luego das al div que debe estar entre estas etiquetas el 100% de alto tal como muestro a continuacion

---- Dentro del CSS --------

html, body {height: 90%}
#mydiv{
height: 100%;
border: solid 1px black;
}

------ Dentro del Html --------

<div id="mydiv">este es mi contenido</div>

Probe antes de enviartelo y funciona, coloque un borde al div para poder ver los resultados, si tienes cualquier otra duda estoy a la orden.

Saludos espero te sirva

pzin · #3 (**permalink**) 28/06/2007, 20:42

Hola zegga.

No sé si me explicado mal.

En mi css tengo esto:

Código:

body,html{
margin:0 ;
padding:0;
height:100%;
}
#cuerpo{
width:98%;
height:100%;
float:left; /* El float es porque al lado del contenedor hay dos (izquierda y derecha) divs que le dan un efecto de sombreado */
}
#contenido{
width:100%;
}
#izquierda{
float:left;
width:55%;
}
#derecha{
margin-left:56%;
width:44%;
}
.clear{
clear:both;
}

La estructura es esta mas o menos:

Código HTML:

<html>
	<body>
		<div id="cuerpo">
			<div id="contenido">
				<div id="izquierda"></div>
				<div id="derecha"></div>
				<div class="clear"></div>
			</div>
		</div>
	</body>
</html>

El problema es que, #izquierda (supongo que #derecha también), crece por encima de #cuerpo (que es el contenedor), y #cuerpo solo llega al 100% de lo visible. Llamo a lo visible a lo que se ve cuando no se mueve el scroll hacia abajo.

Entonces, la parte de abajo se queda sin el div #cuerpo.

hq1 · #4 (**permalink**) 02/07/2007, 09:56

A ver si soy capaz de explicarlo.
Al definir el div con "float", haces que el contenedor no se incremente (bueno en IE si, pero en el resto no).
O sea que tienes 2 posibilidades: o no pones el float, o le pones al contenedor la altura del div que flota.
Por supuesto, cuando no sabes la altura que va a ocupar el que flota la cosa se hace más difícil.
Creo recordar que hay algún truquillo para solucionarlo, pero realmente no se dónde lo leí

*ron* · #5 (**permalink**) 02/07/2007, 11:24

A ver no entendi muxo la inquietud pero segun tu dices los izquierda y derecha sobrepasan a tu contenido , bueno si es un bug tipico, ahi debes usar clearfix mira te dejo la clase aca

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

se la debes aplica a tu contenedor flotante

Atte Ron

pzin · #6 (**permalink**) 03/07/2007, 12:26

hq1 gracias por contestar.

Esa posibilidad la había leido en los temas que mencioné en el #1, pero claro, el problema es que las capas que deben de flotar, tienen siempre una altura diferente.

Muchas gracias *ron*, lo probaré durante esta noche, a ver qué tal va, y ya comento.

pzin · #7 (**permalink**) 03/07/2007, 12:55

Bueno *roc*, lo he aplicado a los contenedores flotantes, al contenedor fijo, incluso al body ya a lo loco, pero nada. La única diferencia es que cuando aplico la clase clearfix a los elementos flotantes, éstos llegan hasta abajo del todo, pero el contenedor fijo sigue en su 100%.

Seguiré haciendo pruebas a ver si pasa algo.

Gracias.

pzin · #8 (**permalink**) 03/07/2007, 14:47

Cuando le quito el height:100%, el contenedor crece como debe, pero las imágenes de fondo desaparecen (ya que éstas capas, si tiene el alto en cien por cien). Tal vez el fondo lo deba hacer con una capa (dos, una en cada lado) de posicionamiento absoluto y puesto con fixed. Lo probaré a ver qué tal se me da.

zzz · #9 (**permalink**) 04/07/2007, 02:34

Hola,

Yo tengo el mismo problema que tu Bonez.

Con Firefox sólo me hace el 100% del espacio visible, si la página tiene scroll no expande la capa por debajo de ese espacio visible.

¿Has lo grado solucionarlo?, porque yo me estoy volviendo majareta tanto darle vueltas, y ninguno de los hacks ni trucos que encuentro me sirver.

Por favor, pido ayuda encarecidamente. Adjunto enlace, HTML y CSS del meollo:

URL
---
www.can-simo.com/maqueta

CSS
----

Código:

/* ***************
   *   GENERAL   *
   *************** */
html, body {
	height:100%;
	margin:0 auto;
    padding:0;
	text-align:center;
}

body {
	background:#091b06 url("/maqueta/images/common/body_back.gif") top repeat-x;
}


body, h3, p, a {
	font:85% 'Trebuchet MS', Arial, Geneva, Verdana, helvetica, sans-serif;
	color:#FFF;
}

/* **************
   *   LAYOUT   *
   ************** */
#pagina {
	background:#091b06 url("/maqueta/images/common/pagina_back.gif") top repeat-y;
	margin:0 auto;
	min-height:100%;
	height:100%;
	height:auto !important;
	text-align:center;
	width:800px;
}

#cabecera{
	background:#000 url("/maqueta/images/common/cabecera_back.gif") top no-repeat;
	height:145px;
	font-size:1.2em;
}

#contenido{
	width:auto;
	padding:23px;
}

#principal {
	width: 440px;
	float: left;
	text-align:left;
	word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
	overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

#lateral {
	width: 287px;
	float: right;
	text-align:left;
	color: #555544;
	word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
	overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

.separadorHorizontal {
	display:block;
	background:#000 url("/maqueta/images/common/back_border_central.gif") top repeat-x;
	height:1px;
}



/* ************
   *   LOGO   *
   ************ */
#logoHeightSep {
	height:26px;
}

#logo {
	background:url("/maqueta/images/common/logo_back.gif") top repeat-x;
	width:755px;
	margin:0 auto;
}

#logo a,
#logo a:visited {
	color:#154505;
	font-size:0.70em;
	text-decoration:none;
	padding:0px 5px 0px 10px;
}

#logo a:hover {
	text-decoration:underline;
}

#logo .separator {
	background:url("/maqueta/images/common/separator_menu.gif") top repeat-y;
}


/* **********************
   *   MENU PRINCIPAL   *
   ********************** */
#menuPrincipalHeightSep {
	height:18px;
}

#menuPrincipal {
	text-align:center;
}

#menuPrincipal a,
#menuPrincipal a:visited {
	font-size:0.80em;
	color:#FFF;
	text-decoration:none;
}

#menuPrincipal a:hover {
	text-decoration:underline;
}

#menuPrincipal a.selected {
	font-weight:bold;
	text-decoration:underline;
}

#menuPrincipal .separator {
	background:url("/maqueta/images/common/separator_menu.gif") top repeat-y;
	height:13px;
	padding:0em .55em;
}

/* **************
   *   BLOQUE   *
   ************** */
#principal .bloque {
  border-bottom:1px dashed #4c4c4c;
  padding-bottom:1.5em;
 }
  
#lateral .bloque {
  border-bottom:1px dashed #000;
  padding-bottom:.4em;
 }

.bloque h3 a {
	color:#2c8a1c;
	font-size:1.2em;
	font-weight:bold;
	text-decoration:none;
}

#principal .bloque h3 a {
	color:#2c8a1c;
}

#lateral .bloque h3 a {
	color:#91ae0e;
}

.bloque h3 a:hover {
	text-decoration:underline;
}

.bloque  p {
	font-size:0.80em;
	line-height:1.8em;
}

.bloque img {
	display:inline;
	float:left;
}

#principal .bloque img {
	padding:0px 20px 10px 0px;
}

#lateral .bloque img {
	padding:0px 10px 5px 0px;
}

.bloque .bloqueEnlace a {
	font-size:1em;
	cursor:pointer;
	text-decoration:none;
}

#principal .bloque .bloqueEnlace a {
	color:#91ae0e;
	border:#91ae0e dashed;
	border-width:0px 0px 1px 0px;
}

#lateral .bloque .bloqueEnlace a {
	color:#afd7bd;
	border:#afd7bd dashed;
	border-width:0px 0px 1px 0px;
}

.bloque .bloqueEnlace a:hover {
	text-decoration:none;
}

#principal .bloque .bloqueEnlace a:hover {
	border:#000 dashed;
	border-width:0px 0px 1px 0px;
}

#lateral .bloque .bloqueEnlace a:hover {
	border:#154505 dashed;
	border-width:0px 0px 1px 0px;
}

/* ********************
   *   CAJA LATERAL   *
   ******************** */
#lateral #box {
	width:100%;
	background-color:#154505;
}

#lateral #boxCornerTL,
#lateral #boxCornerTR,
#lateral #boxCornerBL,
#lateral #boxCornerBR {
	height:13px;
	width:49%;
}

#lateral #boxCornerTL {
	float:left;
	background:#154505 url(/maqueta/images/common/box_1_top_left.gif) left no-repeat;
}

#lateral #boxCornerTR {
	float:right;
	background:#154505 url(/maqueta/images/common/box_1_top_right.gif) right no-repeat;
}

#lateral #boxCornerBL {
	float:left;
	background:#154505 url(/maqueta/images/common/box_1_bottom_left.gif) left no-repeat;
}

#lateral #boxCornerBR {
	float:right;
	background:#154505 url(/maqueta/images/common/box_1_bottom_right.gif) right no-repeat;
}

#lateral #boxContent {
	width:auto;
	padding:20px 20px;
}

HTML
-----

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="es" xml:lang="es" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<meta name="author" lang="es" content="Can Simó" />
		<title>Can Simó - Labrador Retriever</title>
		<link rel="stylesheet" type="text/css" media="screen" href="/maqueta/css/cansimo_test_10.css" />
	</head>
	<body class="inicio">

		<div id="pagina">
			<div id="cabecera">
				<div id="logoHeightSep"></div>
				<div id="logo">
					<table border="0" cellpadding="0" cellspacing="0" width="100%">
						<tr>
							<td><img src="/maqueta/images/common/header_1.gif" alt="Can Sim&oacute; - Labrador Retriever" border="0" /></td>
							<td width="100%" align="right" valign="bottom" style="padding-bottom:2px;"><span class="separator">&nbsp;</span><a href="#">Contactar</a></td>

							<td><img src="images/common/header_2.gif" width="7" height="69" border="0" /></td>
						</tr>
					</table>
				</div>
				<div id="menuPrincipalHeightSep"></div>
				<div id="menuPrincipal"><a href="#" class="selected">Inicio</a><span class="separator">&nbsp;</span><a href="/cansimo/sobrenosotros.html">Can Simó</a><span class="separator">&nbsp;</span><a href="/nuestroschicos/rubics.html">Nuestros chicos</a><span class="separator">&nbsp;</span><a href="/nuestraschicas/aussie.html">Nuestras chicas</a><span class="separator">&nbsp;</span><a href="#">Camadas</a><span class="separator">&nbsp;</span><a href="#">Noticias</a><span class="separator">&nbsp;</span><a href="#">Album fotográfico</a><span class="separator">&nbsp;</span><a href="/laraza/historia.html">La raza</a><span class="separator">&nbsp;</span><a href="#">Enlaces</a></div>

			</div>
			<div id="destacadoCentral"><script language="javascript" type="text/javascript" src="/maqueta/js/embebed/central_home_1.js"></script></div>
			<div class="separadorHorizontal"></div>
			<div id="contenido">
				<div id="principal">
					<div class="bloque">
						<h3><a href="#">Así es un Larador Retriever, conuslta el standard</a></h3>
						<div class="bloqueTexto">

							<p><a href="#" style="border:none;"><img src="images/inicio/imagen_borrar_1.jpg" alt="As&iacute; es un Labrador Retriever" border="0" /></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum eleifend sem at dui. Nulla felis.</p>
						</div>
						<div class="bloqueEnlace">
							<p><a href="#">Consuta el estándar &raquo;</a></p>
						</div>
					</div>
					<div class="bloque" style="border:none;">
						<h3><a href="#">Antes de compartir tu vida con una moscota conoce qué es la tenencia responsable</a></h3>

						<div class="bloqueTexto">
							<p><a href="#" style="border:none;"><img src="images/inicio/imagen_borrar_2.jpg" alt="Conoce qué es la tenencia responsable" border="0" /></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum eleifend sem at dui. Nulla felis. Integer id lacus. Sed ac sem. Nulla facilisi. Nulla facilisi.</p>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
						</div>
						<div class="bloqueEnlace">
							<p><a href="#">Más sobre la tenencia responsable &raquo;</a></p>
						</div>

					</div>
				</div>
				<div id="lateral">
					<div id="box">
						<div id="boxCornerTL"></div>
						<div id="boxCornerTR"></div>
						<div id="boxContent">
							<div class="bloque">
								<a href="#" style="border:none;"><img src="images/inicio/imagen_borrar_3.jpg" alt="Resultados de la Exposición Internacional de Vic" border="0" /></a>

								<h3><a href="#">Resultados de la Exposición Internacional de Vic</a></h3>
								<div class="bloqueTexto">
									<p>Lorem ipsum dolor sit amet, consectetuer. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
								</div>
								<div class="bloqueEnlace">
									<p><a href="#">Leer más &raquo;</a></p>
								</div>

							</div>
							<div class="separadorArticulo"></div>
							<div class="bloque" style="border:none;">
								<h3><a href="#">Abiertas reservas para la nueva camada de Tula y El Niño</a></h3>
								<div class="texto">
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum eleifend sem at dui.</p>
								</div>
								<div class="bloqueEnlace">

									<p><a href="#">Reservar mi cachorro &raquo;</a></p>
								</div>
							</div>
						</div>
						<div id="boxCornerBL"></div>
						<div id="boxCornerBR"></div>
					</div>
				</div>

			</div>
		</div>
	</body>
</html>

pzin · #10 (**permalink**) 04/07/2007, 15:30

Hola ZZZ.

No he conseguido solucionarlo, al final cambié la maquetación y dejé de atribuir el cien por cien a la altura. Si lo consigues solucionar tú, publícalo por favor, por si a otros nos pueda servir.

zzz · #11 (**permalink**) 05/07/2007, 01:35

Hola Bonez,

Pues después de devanarme los sesos, ayer por la tarde un querido contribuyente de otro foro, Mikmoro, me dio esta sencilla solución que parece que funciona al menos en FF2 e IE7:

Creas una clase
Código:
```
.clearBoth {clear: both;}
```

Metes una layer

Código:

<div class="clearBoth"></div>

justo antes de cerrar el último layer

Código:

.
.
<div class="clearBoth"></div>
</div>
</body>
</html>

Y te prometo que esto funciona (en FF2 e IE7), míralo tu mismo aquí:

www.can-simo.com/maqueta

Espero haber sido de ayuda.

Saludos,

z.

pzin · #12 (**permalink**) 05/07/2007, 18:10

Hola de nuevo ZZZ.

Pues ya había probado eso y no me funcionaba. Igual mi caso es (era) especial por tener tres capas que deben bajar hasta donde llegue el contenido (una de contenido y dos para fondos decorativos).