css左边目录高度自适应屏幕

在网页设计中，左边的目录栏是非常常见的，但是如果它的高度不够的话，浏览网页时会给人一种很不舒服的感觉。因此我们需要用 CSS 来让左侧目录的高度自适应屏幕，以便提高用户浏览体验。

最简单的方法就是使用“min-height”属性，它可以将元素高度设置为它和它的内容中最大高度的值。我们可以将左列目录的容器设置为“min-height：100%”，这样左列目录的高度就随着页面高度自适应了。

.left-menu {
  min-height: 100%;
}

但有时候，使用“min-height”并不是我们想要的。比如，如果左侧目录栏比较长，内容比较丰富，我们需要让它的高度根据内容动态变化。这时候我们可以使用“display:table-cell”属性，来实现左侧栏目高度自适应。

我们可以将左侧目录栏容器的父容器设为“display:table”，然后将左侧目录栏容器设置为“display:table-cell”。这样就可以让左侧目录容器的高度根据内容高度自适应了。

.left-menu-wrap {
  display: table;
  height: 100%;
}
.left-menu {
  display: table-cell;
  vertical-align: top;
}

当然，我们还可以使用 JavaScript 来实现左侧目录高度自适应。Chrome、Firefox、Opera、Safari、IE8+都支持这种写法。

通过以上三种方式，我们可以灵活地实现左侧目录的高度自适应，提升用户体验。