Desarrollo y diseño

[CSS] Capa 100% height

SeiYa
SeiYa #1 Nov '06

Bien, algo que parece tan sencillo como aplicar un height: 100%; o bien un top: 0px; bottom 0px; se me vuelve una ardua tarea cuando en la web carga primero el css y después las imágenes (siendo estas de servidores externos) por lo que me calcula la puta posición antes y no después cuando ya cambió la altura.

Bueno, os comento:

Tengo dos capas:

<div id="menu">
...
</div>

y

<div id="cuerpo">
...
</div>

En el menu hay un include que saca obviamente el menu con sus links, bueno no hay problema en esto.

En cuerpo por ejemplo saca las noticias (si estamos en esa sección obviamente) y lo extrae de la base de datos y demás.

Los estilos están aplicados por .css

El cuerpo probé poniéndole height: 100%; o bottom: 0px; y top: 0px; Para que la distancia al "techo" sea 0 y lo mismo para el "suelo".

Vale, bien, el tema, es que por ejemplo, suponed que trabajo a 1024x768

Carga el menu, y pone la altura total, perfecto, pero después carga de la base de datos las noticias, y como es posible que tenga mucho contenido (e imágenes de servidores externos) pues como que la capa cuerpo crece pero la capa menu, no crece por que ya está asignada por así decirlo.

Es decir, la capa cuerpo crece por que su contenido la obliga, y eso hace que crezca la web (en altura) pero no se por que no hace que crezca la capa de menu, sin embargo, se ve que aplica el estilo por que digamos, que tiene la altura de 768.

Es decir, abre la web y la capa menu si ocupa de arriba a abajo pero en cuanto carga la capa cuerpo y su contenido es muy grande pues esta crece pero no lo hace la capa menu:

http://img179.imageshack.us/img179/2229/capasum8.jpg

Capa roja -> Capa menu
Capa azul -> Capa cuerpo

Imagen 1:
Cuando la capa cuerpo no ocupa todo, pues la capa menu si que tiene la altura 100%

Imagen 2:
Cuando la capa cuerpo sobrepasa el tamaño (por que ha cargado los datos de la BBDD y por lo tanto lo hace después de aplicar los estilos) pues la capa menu se queda en la altura 100% inicial, pero como ha crecido esa altura queda ese "hueco" que no queda si la capa cuerpo no sobrepasa la altura total.

Cabe decir que la capa menu solo tiene 1 linea de texto (vamos que el estilo le aplica, no es por <br> ni nada)

L
LordInferno #2 Nov '06

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>One Hundred Percent height divs</title>
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
height:100%; /* this is the key! /
}
#left {
position:absolute;
left:0;
top:0;
padding:0;
width:200px;
height:100%; / works only if parent container is assigned a height value /
color:#333;
background:#eaeaea;
border:1px solid #333;
}
.content {
margin-left:220px;
margin-right:220px;
margin-bottom:20px;
color:#333;
background:#ffc;
border:1px solid #333;
padding:0 10px;
}
#right {
position:absolute;
right:0;
top:0;
padding:0;
width:200px;
height:100%; / works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}

#left p {
padding:0 10px;
}
#right p {
padding:0 10px;
}
p.top {
margin-top:20px;
}
</style>
</head>


<div id="left">
<p class="top">This design uses a defined body height of 100% which allows setting the
contained left and right divs at 100% height.</p>

<p>This design uses a defined body height of 100% which allows setting the contained left and
right divs at 100% height.</p>

<p>This design uses a defined body height of 100% which allows setting the contained left and
right divs at 100% height.</p>
</div>

<div class="content">
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>

<div class="content">
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>

<div class="content">
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>

<div id="right">
<p class="top">To solve an inheritance issue displayed in div #right as rendered in Opera, class p.top
using margin-top:20; is applied to the first paragraph of each outer divs.</p>

<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>

<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>
</body>
</html>

Esto te vale de ejemplo.

http://www.w3schools.com/css/pr_list-style-type.asp

SeiYa
SeiYa #3 Nov '06

Prueba a poner donde pone "This design uses a defined body height which of 100% allows setting the contained left and right divs at 100% height." un mensaje bastante largo, sigue pasando lo mismo:

http://img143.imageshack.us/img143/4438/sesalecq8.jpg

Gracias por la ayuda aunque no sirviese de mucho xD

L
LordInferno #4 Nov '06

Estaras metiendo el codigo mal si tu pones en el body lo marcas como 100% y luego los div le insertas 100% al div lo coge ahora que lo estes haciendo bien eso ya es otro cantar.

Vamos con ese ejemplo deberias poder simplemente es una referencia si no consigues hacerlo es que sencillamente lo estas haciendo mal, pasame tu codigo y te lo hago por primera y ultima vez, pero se hace asi.

L
LordInferno #5 Nov '06

Estaras metiendo el codigo mal si tu pones en el body lo marcas como 100% y luego los div le insertas 100% al div lo coge ahora que lo estes haciendo bien eso ya es otro cantar.

Vamos con ese ejemplo deberias poder simplemente es una referencia si no consigues hacerlo es que sencillamente lo estas haciendo mal, pasame tu codigo y te lo hago por primera y ultima vez, pero se hace asi.

Igual tienes algun estilo mal, etc, una imagen no me sirve de nada, sin saber que estilos has creado o que has hecho, para poder decir que el ejemplo esta mal, jajaja no sera que no tienes encuentas usos por que vamos, decir que a los que escriben los libros de accesibilidad y usabilidad que se equivocan cuando el que pides ayuda eres tu, no crees que el que estas haciendo algo mal eres tu?

L
LordInferno #6 Nov '06

A ver si sabes un poco de CSS la unica forma que hay de hacer que un div tenga 100% de height, mediante CSS es metiendole al body de estilo de height 100% sino es sencillamente imposible.

Pero vamos que si no te lo hace es por que has hecho algo mal y ya te digo que es la unica forma.

L
LordInferno #7 Nov '06

Anda se me paso una cosa señor, pero vamos ya se por que te esta cogiendo mal el estilo, por que al ser un include probablemente le tengas que meter un estilo directamente a ese menu que tendra que tener 100%vamos que el objeto que te pegue lleve el estilo sino no te lo coge es un issues.

Bueno metele el estilo al objeto que te pega segun que casos si el objeto no lleva el estilo bien definido no te lo pillara, no por que tenga el div el id sino el objeto que te pega.

Pero vamos que lo que tiene que tener definido es el objeto que te genere, menuda paranoia ya te digo que te vas a volver loco usando includes y estilos por que si no los defines bien antes de crear el objeto que se va a pegar no te lo pintara bien, tendras que tener muy encuenta estilos que lleven los objetos que vas a pintar y los estilos de estructura que lleven el html.

Pero vamos si me pasas el codigo te puedo hechar una ayudita.

Prueba a ver que el objeto que te pinta osea el menu derecho ya en el asp, tenga un estilo de weigth 100% en el body que probablemente no lo tenga y el div 100 tenga el 100%, y que tb lo tenga en el html, sino probablemente no te coja ninguno.

L
LordInferno #8 Nov '06

No seras tu compañero mio por que me acaban de pedir lo mismo. Yo me llamo jaime.

SeiYa
SeiYa #9 Nov '06

Encantado Jaime, no, no soy compañero tuyo jaja

Bueno, que el problema es otro, por que el html, el body y supadre están puestos como 100% pero vamos, que es otro tema ya está casi solucionado, es metiendo capas dentro de otras, vamos que es un problema muy común y muy tocapelotas xD

C
CH1W4K4 #10 Nov '06

Lo mismo es una respuesta un tanto tonta pero... has probado a poner una capa contenedor que contenga menu y cuerpo? lo mismo se soluciona o si no a lo mejor jugando un poco con los positions...

erdanblo
erdanblo #11 Nov '06 Inocente

Me parece que seguia ocurriendo lo mismo, pero bueno, al <html> le pusistes también height: 100%?

html,body {
height: 100%;
}

SiCk
SiCk #12 Nov '06

Creo recordar que una vez lo intenté y no era compatible con XHTML no sé si 1.0 o 1.1 strict, por lo que si declarabas el DTD del documento así, no chutaba el height ese.

L
LordInferno #13 Nov '06

Pues la misma paranoia tenia uno, los objetos que pintaba tenian que llevar ya antes de pintarlos el estilo sino pasaba de cogerlo por que entiende que el objeto se acaba ahi aunque lugo la pagina lleve un estilo que diga que ese div tiene 100% de height.

Asi que al final le hemos tenido que meter estilos al div y al objeto antes de que pinte nada sino no lo pilla.

Y como lleve ese div algun div interior con algun estilo que lleve pixeles y no pocentaje pasa de coger el estilo.

Vamos una paranoia.

<%@ Register TagPrefix="uc1" TagName="Persona" Src="ControlesUsuario/Persona.ascx" %>
<%@ Page language="c#" Codebehind="DatosPersona.aspx.cs" AutoEventWireup="false" Inherits="ESI.EduVialAlumno.DatosPersona" %>
<%@ Register TagPrefix="uc1" TagName="Menu" Src="ControlesUsuario/Menu.ascx" %>
<%@ Register TagPrefix="uc1" TagName="Cabecera" Src="ControlesUsuario/Cabecera.ascx" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>DatosPersona</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<link href="Estilos/eduvial.css" type="text/css" rel="stylesheet">
</HEAD>

</uc1:Cabecera></TD>
<div id="contenedor">

		<div id="columnasup">
		</div>
		<div id="columna" style="height:100%">
			<table id="tablaMenu" runat="server" border
				[u]</uc1:Menu>
	</div>
		
		
		<div id="contenido">
			<h3>Administración de Usuarios</h3>
			<form id="Form1" method="post" runat="server">
				[u]</uc1:Persona>
				<fieldset>
					<p>&nbsp;</p>
					<p class="campo">
						<asp:ImageButton ID="btRegistrar" Runat="server" ImageUrl="/EduVialAlumno/Imagenes/btn_registrar.gif"
							class="submit"></asp:ImageButton>
						<asp:ImageButton ID="btModificar" Runat="server" ImageUrl="/EduVialAlumno/Imagenes/btn_modificar.gif"
							class="submit"></asp:ImageButton>
						<asp:ImageButton ID="btEliminar" Runat="server" ImageUrl="/EduVialAlumno/Imagenes/btn_eliminar.gif"
							class="submit"></asp:ImageButton>
					</p>
				</fieldset>
			</form>
		</div>
	</div>
</body>

</HTML><%@ Register TagPrefix="uc1" TagName="Persona" Src="ControlesUsuario/Persona.ascx" %>
<%@ Page language="c#" Codebehind="DatosPersona.aspx.cs" AutoEventWireup="false" Inherits="ESI.EduVialAlumno.DatosPersona" %>
<%@ Register TagPrefix="uc1" TagName="Menu" Src="ControlesUsuario/Menu.ascx" %>
<%@ Register TagPrefix="uc1" TagName="Cabecera" Src="ControlesUsuario/Cabecera.ascx" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>DatosPersona</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<link href="Estilos/eduvial.css" type="text/css" rel="stylesheet">
</HEAD>

</uc1:Cabecera></TD>
<div id="contenedor">

		<div id="columnasup">
		</div>
		<div id="columna" style="height:100%">
			<table id="tablaMenu" runat="server" border
				[u]</uc1:Menu>
	</div>
		
		
		<div id="contenido">
			<h3>Administración de Usuarios</h3>
			<form id="Form1" method="post" runat="server">
				[u]</uc1:Persona>
				<fieldset>
					<p>&nbsp;</p>
					<p class="campo">
						<asp:ImageButton ID="btRegistrar" Runat="server" ImageUrl="/EduVialAlumno/Imagenes/btn_registrar.gif"
							class="submit"></asp:ImageButton>
						<asp:ImageButton ID="btModificar" Runat="server" ImageUrl="/EduVialAlumno/Imagenes/btn_modificar.gif"
							class="submit"></asp:ImageButton>
						<asp:ImageButton ID="btEliminar" Runat="server" ImageUrl="/EduVialAlumno/Imagenes/btn_eliminar.gif"
							class="submit"></asp:ImageButton>
					</p>
				</fieldset>
			</form>
		</div>
	</div>
</body>

</HTML>

Pues aqui el objeto menu tb le tuvimos que meter un estilo dentro para que la barra menu llegara hasta abajo, el style ese deberia ir en la hoja de estilo pero lo puse al final fuera por que tenia un pitote con los estilos.

L
LordInferno #14 Nov '06

El DTD da una guerra con los imput, check box y su puta madre, prueba tb a quitarselo, yo lo que suelo hacer es un ejemplo algo muy básico y añadirle solo el objeto que me da problemas para identificar errores sino pierdes horas y horas, aveces hacer un ejemplo básico es lo mejor y más rapido.

Usuarios habituales