CSS: Barre latérale 100% hauteur sans défilement

Question

Je veux une barre latérale qui prend toute la hauteur de l'écran et ne change pas lors du défilement vers le bas.

Donc quand je fais défiler seulement le contenu change mais la barre de navigation reste toujours la même.

J'ai fait un premier exemple: http://jsfiddle.net/CwSD6/

Mais la fonctionnalité ne manque-scroll ...

Cordialement

EDIT: Vous devez utiliser la position: fixe, et en haut, en bas , à gauche avec la valeur 0. http://jsfiddle.net/CwSD6/1/

Answer 1

il peut être fait en faisant position: fixed; dans <aside>

voir ce violon jsfiddle

Answer 2

Essayez ceci:

aside 
{ 
    position: fixed; 
    width: 200px; 
    height: 100%; 
    top: 0; 
    left: 0; 
    border: 1px solid #111; 
} 

Hope this helps

Answer 3

J'utilise la méthode jQuery en utilisant des vis fixes ou généralement absolue avec ma mise en page de la grille. Dans l'exemple ci-dessous, ma grille s'effondre lorsqu'elle est inférieure à 990px, vous devrez donc la modifier en supposant que vous êtes réactif.

$(window).resize(function() { 
    var doc_height = $(document).height(); 
    var doc_width = $(document).width() 
    if (doc_width > 990) { 
     $('#sidebar').css("height", doc_height); 
    } else { 
     $('#sidebar').css("height", 'auto'); 
    } 
}); 

Bien que cela ne soit pas le moyen le plus efficace, vous n'avez pas besoin de définir des variables. Je trouve que cela aide à la lisibilité.

Cordialement, M