[SOLUCIONADO] Footer al final de mi página web.

manute71 · #1 (**permalink**) 09/03/2013, 04:43

Buenos días!

Tengo un problema con el portal web que me estoy creando. Desearía insertar un footer al final del mismo, que desplazara dinámicamente al final de mi página, cuando el menú en acordeón que tengo se despliega por completo y hace que la página tenga scroll, o bien cuando al pinchar en uno de los enlaces de dicho menú, a la derecha, aparece información que también hace que la página tenga scroll.

He estado investigando bastante, pues no se si se trata de un problema de organización de divs, o bien que tengo que aplicar javascript... En el primer caso, he intentado aplicar la técnica del sticky foot que en tantos post aparece por aquí :) y en el segundo caso con javascript, tan sólo he conseguido que el footer se quede al final de la ventana del explorador web, no abajo de mi página.

El plugin que utilizo para el acordeón es jquery.dcjqaccordion.2.7.min.js

Realmente lo que intento es conseguir que el footer quede al final del body en todo momento. Independientemente de si se despliega el menú en acordeón, o el contenido en acordeón.

La función heightTest, es de la que os he hablado en Javascript más arriba.

Os adjunto el código del portal a ver si me podéis aportar alguna idea:
Muchas gracias!!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="all" />

<link href="css/dcaccordion.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.cookie.js'></script>
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/jquery.dcjqaccordion.2.7.min.js'></script>
<script type="text/javascript">
$(document).ready(function($){

$('#accordion-3').dcAccordion({
eventType: 'click',
autoClose: false,
saveState: false,
disableLink: false,
showCount: false,
speed: 'slow'
});

});
</script>

<script type="text/javascript">
$(document).ready(heightTest);
$(window).load(heightTest);
$(window).resize(heightTest);

function heightTest()
{
var windowHeight =$(window).height();
var documentHeight =$(document).height();
if (documentHeight > windowHeight)
{
$('#container-foot').css({'position': 'relative', 'top':'30'});
}
else
{
$('#container-foot').css({'position': 'fixed', 'bottom':'0'});
}
}
</script>
<link href="css/skins/blue.css" rel="stylesheet" type="text/css" />

<title>MAKERS - ADMINISTRACION</title>
<style media="screen">
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow:auto;
font-family:Helvetica;
text-align:center;

}

/************************************************** *****CONTENEDOR GENERAL**********************/
#container-page {
width: 100%;
min-height: 100%;
height: auto !important;
height:100%;
background: #bbb;
margin: 0 auto -41px;

}
/************************************************** *****GENERAL CABECERA************************/
#container-header {
width: 100%;
position: relative;
top:0px;
height:182px;
}
#fondo{
background-image: url("patronCabecera1000.png");
background-repeat: repeat-x;
background-position:top;
z-index:0;
margin:0;
padding: 0px;
width: 100%;
height: 100%;
text-align:center;
/*text-align:right;
*/
}
/********/
/**************** MAIN ***********/

#container-content{
margin-bottom:-40px;
min-height:100%;
height:auto;
height:100%;

}
#main-menu{
width: 1000px;
/*top: 182px;*/
height: 500px;
position:relative;
padding:none;
margin:none;
}

#mainmenu{
width: 241px;
/*top: 182px;*/
height: 500px;
padding:none;
margin:none;
float:left;
}

#container{
margin-left:10px;
width: 749px;
background-color:rgb(204,51,153);
height: 500px;
float: left;
}

/***************/
#container-content{
margin-bottom:-40px;
min-height:100%;
height:auto;

}/**** PIE DE PAGINA ************/

#push{

height: 41px;
clear:both;
}

#container-foot{

/*bottom: 0px;*/
height:41px;
clear:both;

/*width:100%;*/

}

#pie {
width:1000px;
background:#00F;
bottom: 0px;
height: 40px;
position:relative;
padding-bottom:0px;
}

</style>

</head>
<body>
<div id="container-page" >
<div id="wrap">
<div id="container-header">
<div id="fondo">
<div id="trasera">
<img src="cabecera1000.png" />
</div>
</div>
</div>

<div id="menu-auxiliary-container" align="center">
<div id="auxiliary-centrado" align="center">
<div id="auxiliary-background">
</div>

<div id="auxiliary-menu">
<div id="fondomenu">
<ul>
<li><a href="#" class="auxmenu_link1"><p>TRAINING</p></a></li>
<li><a href="#" class="auxmenu_link2"><p>TECHNICAL PUBLICATIONS</p></a></li>
<li><a href="#" class="auxmenu_link3"><p>ABOUT US</p></a></li>
<li><a href="#" class="auxmenu_link4"><p>CONTACT</p></a></li>
</ul>
</div>
</div>
</div>
</div>

<div id="menu-migapan-container" align="center">
<div id="migapan-centrado" align="center">

<div id="migapan-background">
</div>

<div id="migapan-menu">
<div id="migapanmenu">
<ul>
<li><a href="#" class="link0"></a></li>
<li><a href="#" class="link1"><p>Home</p></a></li>
<li><a href="#" class="link2"><p>>     &n bsp;   Perfil</p></a></li>
</ul>
</div>
</div>
</div>
</div>

<div id="menu-functional-container" align="center">
<div id="functional-centrado" align="center">
<div id="functional-background">
</div>

<div id="functional-menu">
<div id="functionmenu">
<ul>
<li><a href="#" class="link0"></a></li>
<li><a href="#" class="link1"></a></li>
<li><a href="#" class="link2"></a></li>
<li><a href="#" class="link3"></a></li>
</ul>
</div>
</div>
</div>
</div>

<div id="contenido-container" align="center">
<div id="main-menu">
<div id="mainmenu">
<div class="blue demo-container">
<ul class="accordion" id="accordion-3">
<li><a href="#" class="link01">OPERATIONAL</a>
<ul>
<li><a href="#" class="link11">ROLE FLOW 1</a>
<ul>
<li><a href="#" class="link1321">FLIGHT CREW TOMA MORENO 2.O TRAINING CENTRE</a></li>
<li><a href="#" class="link2321">COURSE B</a></li>
<li><a href="#" class="link3321">COURSE C</a></li>
<li><a href="#" class="link4321">COURSE D</a></li>
</ul>
</li>
<li><a href="#" class="link12">ROLE FLOW 2</a>
</li>
<li><a href="#" class="link16">ROLE FLOW 3</a>
</li>
<li><a href="#" class="link17">ROLE FLOW 4</a>
</li>
</ul>
</li>

<li><a href="#" class="link02">MISCELLANEOUS</a>
<ul>
<li><a href="#" class="link21">ROLE FLOW 1</a>
<ul>
<li><a href="#" class="link1322">COURSE A</a>
</li>
<li><a href="#" class="link2322">COURSE B</a>
</li>
<li><a href="#" class="link3322">COURSE C</a>
</li>
<li><a href="#" class="link4322">COURSE D</a>
</li>
</ul>
</li>

<li><a href="#" class="link22">ROLE FLOW 2</a>
</li>
<li><a href="#" class="link23">ROLE FLOW 3</a>
</li>
<li><a href="#" class="link24">ROLE FLOW 4</a>
</li>
</ul>
</li>

<li><a href="#" class="link03">MAINTENANCE</a>
<ul>
<li><a href="#" class="link21">ROLE FLOW 1</a>
<ul>
<li><a href="#" class="link1323">COURSE A</a></li>
<li><a href="#" class="link2323">COURSE B</a></li>
<li><a href="#" class="link3323">COURSE C</a></li>
<li><a href="#" class="link4323">COURSE D</a></li>
</ul>
</li>

<li><a href="#" class="link32">ROLE FLOW 2</a></li>
<li><a href="#" class="link33">ROLE FLOW 3</a></li>
<li><a href="#" class="link34">ROLE FLOW 4</a></li>
</ul>
</li>
</ul>
</div>

</div>
<div id="container"></div>
</div>
</div>
</div>
<div id="push">
</div>
</div>

<div id="container-foot" align="center">
<div id="pie" align="center">
Foots
</div>
</div>

</body>
</html>

manute71 · #2 (**permalink**) 12/03/2013, 02:35

Hola a todos,

el problema era el siguiente:

#container{
margin-left:10px;
width: 749px;
background-color:rgb(204,51,153);
height: 500px;
float: left;
}

si cambiamos la altura a auto, el desplazamiento ya es automático :)
#container{
margin-left:10px;
width: 749px;
background-color:rgb(204,51,153);
height: auto;
float: left;
}

Saludos!

pzin · #3 (**permalink**) 12/03/2013, 02:54

El problema en todo caso era que indicas una altura no necesaria. Porque puedes omitir la altura automática, tendrá el mismo efecto, ya que la altura es automática por defecto y es una redundancia indicarlo.

Y para otra vez no dupliques temas.