Problema con div al maquetar

stephen · #1 (**permalink**) 06/01/2006, 14:41

Hola, aqui va la descripción de mi problema:

Tengo un encabezado superior horizontal con un ancho del 100% y un alto en pixeles, debajo de el se coloca otras dos secciones la del menu y la del contenido en forma de columnas verticales.

El problema esta en que estas dos columnas (sección 2 y 3) no logro que abarque el resto de la pantalla a lo alto sin importar la resolución de pantalla o tamaño de la venta del navegador. Use la propiedad height al 100% pero se sale de pantalla las columnas. Porque toma como referencia la cordenada 0,0 del body.

Alguna solución?? para que estas dos columnas ocupen el resto del espacio a lo alto relativamente.

Aquí esta el código

Código HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Maquetacion</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#Content {
width: 100%;
height: 100%;
}
#seccion1 {
height: 69px;
width: 100%;
background-color: #FFCC00;
}
#seccion2 {
width: 235px;
background-color: #009933;
float: left;
height: 100%;
}
#seccion3 {
margin-left: 235px;
background-color: #0033CC;
}
-->
</style>
</head>
<body>
<div id="Content">
<div id="seccion1">Encabezado</div>
<div id="seccion2">Menu</div>
<div id="seccion3">Base Contenido</div>
</div>
</body>
</html>

Desde ya gracias

taar · #2 (**permalink**) 06/01/2006, 22:00

Le agregue un poco de JS para acomodar los DIVs. También fijate en tu CSS le agregue, en el body padding: 0, esto es para que en Opera no se quden unos espacios alrededor del cuadro.

Código HTML:

 <html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
 <title>Maquetacion</title> 
 <style type="text/css"> 
 <!-- 
 body { 
   margin-left: 0px; 
   margin-top: 0px; 
   margin-right: 0px; 
   margin-bottom: 0px;
   padding: 0; /* Opera */
} 
#Content { 
  width: 100%; 
  height: 100%; 
} 
#seccion1 { 
  height: 69px; 
  width: 100%; 
  background-color: #FFCC00; 
} 
#seccion2 { 
  width: 235px; 
  background-color: #009933; 
  float: left; 
} 
#seccion3 { 
  margin-left: 235px; 
  background-color: #0033CC; 
} 
--> 
</style>
<script language = "javascript" type="text/javascript">
    matchHeight = function() {
        divContent = document.getElementById('Content');
        if(divContent.offsetHeight){
            altura_divContent = document.getElementById('Content').offsetHeight;
            altura_seccion1 = document.getElementById('seccion1').offsetHeight;
        } else {
            altura_divContent = document.getElementById('Content').style.pixelHeight;
            altura_seccion1 = document.getElementById('seccion1').style.pixelHeight;
        }
        document.getElementById('seccion2').style.height = altura_divContent - altura_seccion1 + 'px';
		document.getElementById('seccion3').style.height = altura_divContent - altura_seccion1 + 'px';
    }
    window.onresize = function() {
		matchHeight();
    }
    window.onload = function() {
        matchHeight();
    }
	var appName = navigator.userAgent.toLowerCase();
	if( appName.indexOf("opera") > 0 && String(parseFloat(appName.substr(appName.indexOf("opera") + 6 ))) < 8 ) {  
		setInterval("matchHeight()",500);
	} 
</script>

 </head> 
 <body> 
 <div id="Content"> 
 	<div id="seccion1">Encabezado</div> 
	 <div id="seccion2">Menu</div> 
	 <div id="seccion3">Base Contenido</div> 
</div>
</body>
</html>

stephen · #3 (**permalink**) 09/01/2006, 10:46

Gracias taar !!!!!! ahora mismo lo estoy ya probando.

gruu · #4 (**permalink**) 09/06/2008, 01:58

no hay una manera más elegante de hacer eso?
no se como conseguir esto:

|div 9px| div 100% |div 9px|

tres columans, las dos laterales con un ancho fijo y la central que ocupe el resto
es posible usando solo css?

hades87 · #5 (**permalink**) 09/06/2008, 03:16

si que es posible, has de ahcer un div que será donde irá todo, luego yo haría otro div con float left y otro con right y ahí pondría uno de los bordes y el central, y en el otro el toro borde.

Si te sirve mriate esto: http://www.cristalab.com/tutoriales/...en-xhtml-y-css

Mikmoro · #6 (**permalink**) 09/06/2008, 11:26

Cita:

Iniciado por gruu

no hay una manera más elegante de hacer eso?
no se como conseguir esto:

|div 9px| div 100% |div 9px|

tres columans, las dos laterales con un ancho fijo y la central que ocupe el resto
es posible usando solo css?

Hay una manera muy muy simple de hacerlo:

HTML:

<div id="derecha"></div>
<div id="izquierda"></div>
<div id="centro"></div>

CSS:

#derecha {width: 9px; float: right;}
#izquierda {width: 9px; float: left;}
#centro {margin: 0 9px;}

Mikel.