DIVs con misma altura...

MikiBroki · #1 (**permalink**) 07/10/2006, 12:14

Hola buenas,

Normalmente hago mis páginas con tablas y lo cierto es que quedan genial y las creo rápidamente.

Pero como está tan "de moda" hacerlo con DIVs (la verdad no entiendo por qué ha que con tablas se hacen rápidamente) he probado a hacer la siguiente de ese modo a ver qué tal.

Lo que quiero es hacer algo así:

http://glish.com/css/7.asp

... pero de forma que los tres DIVs verticales se adapten al alto de la pantalla según la resolución (con tablas se hace enseguida con porcentajes)... ¿cómo podría hacerse?

Lo que pretendo es crear una página con el típico encabezado y dos columnas, pero si pongo en % el encabezado, y aparte, que el DIV donde irá el contenido si redimensiono la página, éste queda por fuera del DIV, que no se estira... y no quiero configurarlo para que aparezcan las barras de desplazamiento

Gracias

MikiBroki · #2 (**permalink**) 07/10/2006, 12:41

Código:

<HTML>

<HEAD>
<LINK TYPE="text/css" REL="styleSheet" HREF="./css/estilos.css" />
</HEAD>
		
<BODY>			

    <DIV ID="divGeneral">

        <DIV ID="divEncabezado" >
        </DIV>

        <DIV ID="divMenu" >
                <SPAN CLASS="menuSeccion">SECCIÓN 1</SPAN>		
                <UL CLASS="menu">
                    <LI CLASS="menuOpcion"><A HREF="#" CLASS="menuEnlace">Opción 1</A></LI>
                    <LI CLASS="menuOpcion"><A HREF="#" CLASS="menuEnlace">Opción 2</A></LI>
                    <LI CLASS="menuOpcion"><A HREF="#" CLASS="menuEnlace">Opción 3</A></LI>							
                    <LI CLASS="menuOpcion"><A HREF="#" CLASS="menuEnlace">Opción 4</A></LI>
                    <LI CLASS="menuOpcion"><A HREF="#" CLASS="menuEnlace">Opción 5</A></LI>
                </UL>			
		
         </DIV>

         <DIV ID="divCuerpo" >
             el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>el cuerpo<br>
         </DIV>
				
    </DIV>
				
</BODY>
	
</HTML>

Los estilos:

Código:

body {
	margin:0px 0px 0px 0px;
}


#divGeneral {
	height:100%;
	width:778px;

	background-color:#0055AA;

	/*
	border-style:none;
	border-width:2px;
	*/
}


#divEncabezado {	
	height:120px ;
	width:778px;	
background-image:url("../imagenes/encabezado.png");
	/*background-color:#FF0000;*/
}


#divMenu {
	height:90%;
	position:absolute;
	top:100px;	
	width:170px;
	background-color:#00FF00;	
}


#divCuerpo {
	height:90%;
	position:absolute;
	top:100px;
	left:170px;
	width:608px;
	background-color:#0000FF;
	overflow:inherit;
}


.menu {
	list-style:none;
	border-style:solid;
	padding:2px;
	border-width:0px;
}


.menuSeccion {
	color:red;
	font-family:Arial;
	font-size:11pt;
	font-weight:bold;
	align:center;
	margin-left:10px;
}

.menuOpcion {
	color:red;
	height:20px;
		
	border-style:solid;
	border-width:1px;
	
	padding:0px;	
	margin:2px;

	background-color:yellow;
}


.menuEnlace {
	color:black;

	text-decoration:none;
	
	font-family:Arial;
	font-size:10pt;
	font-weight:bold;
}

iconogt · #3 (**permalink**) 07/10/2006, 12:59

Vámonos a CSS!...

urgido · #4 (**permalink**) 07/10/2006, 15:24

creo que lo de la altura sería asi:

Código HTML:

<div style="height:100%">Hola</div>

MikiBroki · #5 (**permalink**) 07/10/2006, 15:48

Sí... eso lo sé... el tema es que tengo:

* Un div general al "height:100%", con otros tres dentro:

* uno para el encabezado al "height:10%"
* dos para cada una de las columnas al "height:90%"

Pero al redimensionar no queda bien, el div encabezado se reduce en proporción y no se ve entera la imagen que contiene... por lo que tengo que poner las dimensiones en px del div, pero luego los otros no se ajustan tampoco al alto del documento...

Alguien podría decirme al menos dónde consultar ejemplos en que se ajusten a la resolución, o esto sólo se puede hacer con tablas?

urgido · #6 (**permalink**) 07/10/2006, 15:58

bueno a mi punto de vista creo que el post debería ir en CSS. Aquí te dejo una guía práctica: http://www.htmlpoint.com/css/css_10.htm

Espero y te sirva. Saludos ;)

MikiBroki · #7 (**permalink**) 07/10/2006, 16:25

sí lo siento, me equivoqué al poner el post. El enlace está muy bien, pero no veo nada que solucione mi problema, pero gracias

urgido · #8 (**permalink**) 07/10/2006, 16:28

ahí habla sobre la tag "position" eso sin duda soluciona tu problema ya que te da 4 opciones para respetar las dimensiones de tu imágen aunque las del div sean otras. Saludos y de nada ;)

MikiBroki · #9 (**permalink**) 08/10/2006, 14:15

Eso puede solucionar el tema con la imagen, pero no el problema que quiero que las columnas tengan ambas el mismo tamaño independientemente de su contenido y de la resolución, que se adapten a ella como se hace con las tablas.

Tras muuucho buscar la única forma de solucionar esto que he encontrado:

http://platea.pntic.mec.es/~jmas/man...scolumnas.html

Lo que se hace es poner imágenes de fondo para alargarlos... cosa que me parece una cutrez, y si alguien amablemente no me dice una forma mejor yo sigo con mis tablas.

Gracias ;)