Faire une barre de navigation verticale strech au-delà de son contenu

Question

J'ai pris cette image à partir d'un autre poste ici: https://i.imgur.com/cx3jXPu.jpg

Je veux la barre latérale d'avoir une hauteur de 100%, même si les éléments de la barre latérale ne correspondent pas à la hauteur de la div

J'ai fait float: à gauche de la barre latérale, donc le contenu de la page qui est plus que la hauteur de la barre latérale est sous la barre latérale. Comme ceci: https://imgur.com/a/7yyJU

Donc, fondamentalement, je veux que la barre latérale s'étende à la hauteur de la page sans avoir de contenu en dessous si cela a du sens.

Answer 1

Voici une approche, où vous pouvez simplement fixer la barre latérale à la fenêtre en utilisant la propriété CSS position:fixed, cela définira sa position par rapport à la fenêtre du navigateur, en définissant top:0px;bottom:0px;left:0px il sera coller à la fenêtre de gauche et il sera toujours pleine hauteur. Ensuite, nous devons ajouter une marge de 210px pour compenser le contenu du site afin qu'il ne chevauche pas la barre latérale.

Note: J'ai utilisé une propriété CSS supplémentaire appelée box-sizing: border-box, ce que fait cette propriété CSS, elle inclut la bordure et le remplissage de l'élément dans la hauteur totale de l'élément, car sinon, la bordure provoquera une barre de défilement lorsqu'il n'y a pas de contenu. Informez-moi si le code ci-dessus résout votre problème!

html, 
 
body { 
 
    margin: 0px; 
 
    height: auto; 
 
    width: 100%; 
 
} 
 

 
.sidebar { 
 
    width: 200px; 
 
    float: left; 
 
    position: fixed; 
 
    left: 0px; 
 
    top: 0px; 
 
    bottom: 0px; 
 
    border: 1px solid black; 
 
    box-sizing: border-box; 
 
} 
 

 
.content { 
 
    margin-left: 210px; 
 
}

<div class="sidebar">this is the fixed sidebar</div> 
 
<div class="content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et condimentum nibh. Aenean eu orci aliquam, consequat ipsum at, blandit eros. Duis commodo tincidunt ligula. Suspendisse pellentesque erat risus, pulvinar convallis ligula congue non. 
 
    Nam sit amet tempus nisl. In malesuada at augue vel mattis. Sed luctus eu neque in dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin pharetra tellus eu convallis suscipit. Mauris sit amet ultrices 
 
    urna. Duis lectus nisl, luctus eu ultrices quis, scelerisque id lacus. Donec suscipit lacus sit amet accumsan consequat. Donec vitae sagittis risus. Sed at ante at sapien placerat laoreet a a leo. Integer tincidunt ut quam ornare luctus. Suspendisse 
 
    sodales, ex quis congue laoreet, lacus tortor tristique metus, vitae tempus ipsum augue vitae lectus. Donec pharetra et metus at ultricies. Aliquam tempus gravida tortor. Mauris non finibus erat. Nam sed scelerisque metus. In pulvinar, lacus in placerat 
 
    placerat, enim dolor porta magna, sed maximus enim felis nec tortor. Nunc elementum purus at justo dictum, quis mollis tellus vulputate. Maecenas sagittis placerat orci ac placerat. Nunc convallis sit amet nisi non imperdiet. Integer dictum ipsum nec 
 
    nibh dapibus, ut consectetur mi hendrerit. Donec euismod, felis in luctus malesuada, est purus varius sapien, ut rhoncus mauris est a eros. Proin id metus eu quam aliquet pharetra. Nullam tincidunt ligula vel ligula consectetur eleifend. Proin non posuere 
 
    libero. Etiam eu iaculis ex. Curabitur sit amet nibh interdum, elementum velit dictum, elementum purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed bibendum sapien at imperdiet dictum. Phasellus congue 
 
    et dui vel ultrices. Quisque felis risus, malesuada ac scelerisque et, vestibulum nec leo. Aenean eget enim vestibulum, vulputate dolor eu, scelerisque libero. In ut venenatis ligula, a vulputate eros. Maecenas eget convallis diam, non condimentum arcu. 
 
    Mauris vitae velit in magna facilisis semper ut at lectus. Praesent tempor lorem nisl, eget finibus lorem lacinia id. Cras ac vulputate dui, sit amet pellentesque ante. Vestibulum mollis ante nec purus faucibus, ut mattis magna gravida. Aenean commodo 
 
    velit non lorem hendrerit maximus. Sed nec urna convallis, mattis dolor eget, accumsan quam. Donec luctus, ante consectetur egestas aliquam, turpis turpis posuere enim, in convallis nunc massa et arcu. Fusce lobortis sapien orci, eu mollis sapien sollicitudin 
 
    a. Ut semper iaculis malesuada. Fusce tincidunt lacinia justo quis faucibus. Aenean rutrum ex elit, in faucibus eros ultrices ut. Integer eu sagittis leo, et accumsan est. Aenean vel varius diam. Maecenas id tortor viverra, tristique massa non, consectetur 
 
    velit. Pellentesque condimentum elit sed urna porta sollicitudin. Donec ultricies pellentesque diam, in mollis risus consequat eget. Donec a consectetur velit. Integer lobortis efficitur ante, eu sagittis nisl tincidunt et. Donec a neque scelerisque, 
 
    pellentesque dui sed, feugiat tortor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et condimentum nibh. Aenean eu orci aliquam, consequat ipsum at, blandit eros. Duis commodo tincidunt ligula. Suspendisse pellentesque erat risus, 
 
    pulvinar convallis ligula congue non. Nam sit amet tempus nisl. In malesuada at augue vel mattis. Sed luctus eu neque in dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin pharetra tellus eu convallis 
 
    suscipit. Mauris sit amet ultrices urna. Duis lectus nisl, luctus eu ultrices quis, scelerisque id lacus. Donec suscipit lacus sit amet accumsan consequat. Donec vitae sagittis risus. Sed at ante at sapien placerat laoreet a a leo. Integer tincidunt 
 
    ut quam ornare luctus. Suspendisse sodales, ex quis congue laoreet, lacus tortor tristique metus, vitae tempus ipsum augue vitae lectus. Donec pharetra et metus at ultricies. Aliquam tempus gravida tortor. Mauris non finibus erat. Nam sed scelerisque 
 
    metus. In pulvinar, lacus in placerat placerat, enim dolor porta magna, sed maximus enim felis nec tortor. Nunc elementum purus at justo dictum, quis mollis tellus vulputate. Maecenas sagittis placerat orci ac placerat. Nunc convallis sit amet nisi 
 
    non imperdiet. Integer dictum ipsum nec nibh dapibus, ut consectetur mi hendrerit. Donec euismod, felis in luctus malesuada, est purus varius sapien, ut rhoncus mauris est a eros. Proin id metus eu quam aliquet pharetra. Nullam tincidunt ligula vel 
 
    ligula consectetur eleifend. Proin non posuere libero. Etiam eu iaculis ex. Curabitur sit amet nibh interdum, elementum velit dictum, elementum purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed bibendum 
 
    sapien at imperdiet dictum. Phasellus congue et dui vel ultrices. Quisque felis risus, malesuada ac scelerisque et, vestibulum nec leo. Aenean eget enim vestibulum, vulputate dolor eu, scelerisque libero. In ut venenatis ligula, a vulputate eros. Maecenas 
 
    eget convallis diam, non condimentum arcu. Mauris vitae velit in magna facilisis semper ut at lectus. Praesent tempor lorem nisl, eget finibus lorem lacinia id. Cras ac vulputate dui, sit amet pellentesque ante. Vestibulum mollis ante nec purus faucibus, 
 
    ut mattis magna gravida. Aenean commodo velit non lorem hendrerit maximus. Sed nec urna convallis, mattis dolor eget, accumsan quam. Donec luctus, ante consectetur egestas aliquam, turpis turpis posuere enim, in convallis nunc massa et arcu. Fusce lobortis 
 
    sapien orci, eu mollis sapien sollicitudin a. Ut semper iaculis malesuada. Fusce tincidunt lacinia justo quis faucibus. Aenean rutrum ex elit, in faucibus eros ultrices ut. Integer eu sagittis leo, et accumsan est. Aenean vel varius diam. Maecenas id 
 
    tortor viverra, tristique massa non, consectetur velit. Pellentesque condimentum elit sed urna porta sollicitudin. Donec ultricies pellentesque diam, in mollis risus consequat eget. Donec a consectetur velit. Integer lobortis efficitur ante, eu sagittis 
 
    nisl tincidunt et. Donec a neque scelerisque, pellentesque dui sed, feugiat tortor. 
 
</div>

Answer 2

donne à la fois le flottant div gauche et la largeur spécifique.

et leur donner min-height: 100vh