html - 使垂直导航栏超出其内容

Question

我从这里的另一篇文章中截取了这张图片:https://i.imgur.com/cx3jXPu.jpg

即使侧边栏元素不适合 div 的高度，我也希望侧边栏具有 100% 的高度

我已经完成了 float: left 到侧边栏，所以超过侧边栏高度的页面内容会出现在侧边栏下方。像这样:https://imgur.com/a/7yyJU

所以，基本上，如果有意义的话，我希望侧边栏延伸到页面的高度，而在其下方没有内容。

Answer 1

这是一种方法，您可以使用 CSS 属性 position:fixed 将侧边栏固定到窗口，这将通过设置 top 来设置其相对于浏览器窗口的位置:0px;bottom:0px;left:0px 它将粘在左边的窗口上，并且总是全高。然后我们需要添加一个210px的边距来偏移网站的内容，使其不与侧边栏重叠。

注意:我使用了额外的 CSS 属性 box-sizing: border-box，这个 CSS 属性的作用是，它将元素的边框和内边距包含在元素的总高度中元素，这是因为没有它，当没有内容时，边框将导致滚动条。

如果以上代码解决了您的问题，请告诉我!

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>