javascript - 使用 CSS 创建侧边栏，同时还具有顶部栏

Question

我正在尝试使用 CSS 创建一个侧边栏，同时在同一窗口中也有一个顶部栏。我有一个 <div id="topbar">和一个 <div id="sidebar_left">在我的 html 文件中。在顶部栏中有用于打开、保存和加载等的图标。在边栏中有一个文件列表。如果列表长于窗口的高度，应该可以只滚动侧边栏而不是整个页面。

我的 CSS:

#topbar{
  height: 40px;
  background: #ddd;
  border-bottom: 1px #aaa solid;
  width: 100%;
}
#topbar img{
  height: 32px;
  width: 32px;
}

#sidebar_left{
  overflow-y: scroll;
  min-width: 150px;
  position: fixed;
  height: 100%;
  float: left;
  background: #f0f0f0;
  border-right: 1px #aaa solid;

  padding-right: 20px;
}
#sidebar_left h1{
  font-size: 1em;
}
#sidebar_left ul{
  list-style: square;
}
#sidebar_left a{
  color: #555;
  text-decoration: none;
}
#sidebar_left li{

}
#sidebar_left ul li img{
  height: 16px;
  width: 16px;
  margin-right: 6px;
}

我的问题是侧边栏被顶部栏的高度向下推，因此不完全可见(它在底部被裁剪)。如果我从我的 html 文件中删除 topbar-div，侧边栏将完全可见。我想我可以通过将侧边栏的高度设置为(窗口的高度)-(顶部栏的高度)来用 JavaScript 解决这个问题。有没有一种方法可以不用 JavaScript 来实现？

Answer 1

您可以使用 css calc 函数。您只需将 height: calc(100% - 80px); 添加到您的侧边栏并将减法更改为您的顶部栏的高度。

这是关于它的 W3Schools 页面:http://www.w3schools.com/cssref/func_calc.asp