collant div position fixe

Question

Voici mon travail html. http://jsfiddle.net/awaises/remqf/4/

Je veux pousser la boîte fixe div en bas de l'écran. Mais il se chevauche sur la navigation de gauche et les derniers éléments de la navigation se cachent derrière la boîte verte. Pouvons-nous réparer la boîte verte selon la conception suivante? Mais nous devons nous assurer que la boîte verte doit être au bas de l'écran même si la résolution de la fenêtre est petite ou grande.

mise en page de conception URL http://www.thewebmakerz.com/screen.jpg

Answer 1

Est-ce .left-col{ height:500px;} résoudre votre problème?

Answer 2

Voir this fiddle.

Trois conseils clés:

1. Put "-pied de page gauche" dans un autre parent alors le contenu de votre menu (appelé "gauche-col-haut"). "Left-col-top" devrait être transparent, "position: fixed", avec "z-index: 1" et une hauteur minimale supérieure à votre menu.
2. "left-footer" doit être "position: absolute".

Answer 3

En regardant l'écran 1.1, s'il y a la 11ème liste dans la boîte jaune, elle ira définitivement derrière la boîte verte. (Considérez également les barres d'outils/barres de menus dans les navigateurs). Vous devrez peut-être utiliser quelque chose comme "Plus de liens" dans le cas où la hauteur de l'écran est inférieure. Ecran 1.2 et suivant: Si jQuery est une option, vous pouvez utiliser la fonction scrollTop. Initialement, laissez la boîte verte être fixée avec la position: fixe et une marge négative du bas. Ensuite, lorsque l'utilisateur fait défiler à un certain montant (comme on le voit dans l'écran 1.2) essayer code suivant jQuery:

var yellowBoxHeight = $("div.yellow-box").height(); 
$document.scroll(function() { 
    if ($document.scrollTop() >= yellowBoxHeight - 100) { 
    // If user has scrolled some amount, eg. 100 pixels of yellow box is still visible 
    // make the green box animate & let it come upwards 
    } else { 
    // put the green-box back with some negative margin into the bottom 
    } 
});