HTML 在线编辑器| BEGTUT.COM

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #4CAF50;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>

<div style="margin-left:25%;padding:1px 16px;height:1000px;">
  <h2>固定的全高侧边导航</h2>
  <h3>试着滚动这个区域，看看侧边导航是如何粘在页面上的</h3>
  <p>请注意，此 div 元素的左边距为 25%。 这是因为侧面导航设置为 25% 宽度。 如果您删除边距，侧边导航将覆盖/位于此 div 的顶部。</p>
  <p>另请注意，我们已将侧边导航设置为 overflow:auto。 这将在侧边导航太长时添加一个滚动条（例如，如果它内部有超过 50 个链接）。</p>
  <p>一些文字..</p>
  <p>一些文字..</p>
  <p>一些文字..</p>
  <p>一些文字..</p>
  <p>一些文字..</p>
  <p>一些文字..</p>
  <p>一些文字..</p>
</div>

</body>
</html>