Si el contenido de la columna del lado izq hacia que excediera la altura del contenedor debia funcionar la opción css 'overflow: auto'
Primero genere una página basándome en http://www.cssstickyfooter.com/ para que el pie de pagina siempre quedara al final (razón por me era desconocido la altura del contenedor).
además use las librerías de prototype para simplificar el manejo de los javascript.
Quedando asi.
el lado blanco representa el menú izquierdo, el amarillo el contenido donde si desean pueden aplicar el mismo truco, la parte inferior el pie de página.
Codigo XHTML
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://www.cssstickyfooter.com/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.prototypejs.org/javascripts/prototype.js"></script>
<script type="text/javascript">
Event.observe(window, 'load', function() {
redimensiona();
});
window.onresize = function(){
redimensiona();
}
function redimensiona(){
var contenedor = $('contenedor');
var menu = $('menu-izq');
var foot = $('footer');
var contDims = contenedor.getDimensions();
var menuDims = menu.getDimensions();
var footDims = foot.getDimensions();
var y = ( contDims.height - footDims.height ) ; /*resto footer*/
var styles = { height: y +'px' };
menu.setStyle(styles);
}
</script>
</head>
<body id="contenedor">
<div id="wrap" style="background-color:#CCCCCC">
<div id="main" class="clearfix" >
<div id="menu-izq" style="background-color:#FFFFFF;float:left;width:100px;overflow:auto;">menu </div>
<div id="detalle" style="background-color:#FFFF00">contenido</div>
</div>
</div>
<div id="footer" style="background-color:#993300">
Pie de pagina
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://www.cssstickyfooter.com/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.prototypejs.org/javascripts/prototype.js"></script>
<script type="text/javascript">
Event.observe(window, 'load', function() {
redimensiona();
});
window.onresize = function(){
redimensiona();
}
function redimensiona(){
var contenedor = $('contenedor');
var menu = $('menu-izq');
var foot = $('footer');
var contDims = contenedor.getDimensions();
var menuDims = menu.getDimensions();
var footDims = foot.getDimensions();
var y = ( contDims.height - footDims.height ) ; /*resto footer*/
var styles = { height: y +'px' };
menu.setStyle(styles);
}
</script>
</head>
<body id="contenedor">
<div id="wrap" style="background-color:#CCCCCC">
<div id="main" class="clearfix" >
<div id="menu-izq" style="background-color:#FFFFFF;float:left;width:100px;overflow:auto;">menu </div>
<div id="detalle" style="background-color:#FFFF00">contenido</div>
</div>
</div>
<div id="footer" style="background-color:#993300">
Pie de pagina
</div>
</body>
</html>
la función redimensiona se encarga de redimensionar la altura del menú izquierdo al calcular la nueva altura 'y' al restarle al contenedor principal 'contenedor' la altura del pie 'footer' con la operacion var y = ( contDims.height - footDims.height ) ; para luego reasignársela al menú 'menu-izq' con var styles = { height: y +'px' }; menu.setStyle(styles); .
No hay comentarios:
Publicar un comentario