Positionnement CSS: Le menu long de la main gauche apparaît derrière le pied de page

Question

J'ai une disposition en deux colonnes CSS qui est fixe et centrée. Sur les pages où la navigation est longue et le contenu est court, le pied de page ne se repositionne pas en dessous de la navigation - il reste à la hauteur minimale de la zone de contenu et la navigation tombe derrière le pied de page.

J'ai inclus tout le violon pour vous de voir: http://jsfiddle.net/fmJqw/1/

Mais essentiellement, j'ai la structure suivante:

<div id="wrapper"> 
    <div id="headerWrapper"></div> 
    <div id="bcrumbwrapper"></div> 
    <div id="midWrapper"> 
     <div id="navWrapper"></div> 
     <div id="contentWrapper"></div> 
    </div> 
    <div class="clear"></div> 
    <div id="footerWrapper"></div> 
</div> 

Le CSS se présente comme suit:

#wrapper{ 
    padding:0px; 
    margin:0 auto; 
    width:1000px; 
    min-height:768px; 
} 
/*Header styles*/ 
#headerWrapper{ 
    padding:0px 0px 0px 0px; 
    margin:0px; 
    width:1000px; 
    height:175px; 
    position:relative; 
} 

#bcrumbWrapper{ 
    padding:0px 0px 0px 20px; 
    margin:0px; 
    width:980px; 
    min-height:24px; 
    position:relative; 
} 

#midWrapper{ 
    padding:0px; 
    margin:0px; 
    width:1000px; 
    height:auto; 
    position:relative; 
} 

#navWrapper{ 
    padding:20px 0px 0px 20px; 
    margin:0px; 
    float:left; 
    width:200px; 
    min-height:513px; 
    position:absolute; 
    top:0; 
    bottom:0; 
} 

#contentWrapper{ 
    padding:15px; 
    margin: 0px 0px 0px 220px; 
    float:left; 
    width:750px; 
    min-height:503px; 
    position:relative; 
    background-color: #FFFFFF; 
} 

#footerWrapper{ 
    padding:5px 0px 0px 0px; 
    margin:0px; 
    width:1000px; 
    height:40px; 
    position:relative; 
} 

Toute aide avec gratitude appréciée! Je me déchire les cheveux.

Answer 1

J'ai trouvé la réponse à cette question d'un ami qui n'est pas membre et que je voulais poster pour référence future. Parce que j'essayais de faire flotter les deux éléments vers la gauche, mais en utilisant le positionnement absolu pour l'un des divs, les choses étaient en concurrence. J'ai supprimé le flottant sur l'encapsuleur de contenu et supprimé le positionnement absolu sur l'encapsuleur de navigation. J'ai ensuite changé la couleur d'arrière-plan de la div contenant pour s'assurer qu'il est apparu comme si le navwrapper courait la longueur de la page.

Il est donc devenu:

#midWrapper{ 
    padding:0px; 
    margin:0px; 
    width:1000px; 
    height:auto; 
    position:relative; 
    background-colour: #EBE2CA; 
} 

#navWrapper{ 
    padding:20px 0px 0px 20px; 
    margin:0px; 
    float:left; 
    width:200px; 
} 

#contentWrapper{ 
    padding:15px; 
    margin: 0px 0px 0px 220px; 
    width:750px; 
    min-height:503px; 
    position:relative; 
    background-color: #FFFFFF; 
} 

Aucune modification du html et pas javascript nécessaire!

Merci d'avoir aidé :) Et merci à mon ami Chris pour cette réponse.

Answer 2

Vous pouvez toujours modifier dynamiquement la hauteur minimale avec un bit javascipt, en fonction de la hauteur du div qui contient le contenu, ce que je pense être #contentWrapper.

Vous pouvez cocher CSS Sticky footer: http://www.cssstickyfooter.com/ mais il faudra un peu de fiddling pour le faire fonctionner en raison de la nature de votre balisage.