Question

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

我的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的情况下完成它？

Answer 1

设置#topbar position:fixed或position:absolute并为#topbar的身高提供侧边栏最高偏移量。

如果#topbar position:absolute，请记得将position:relative添加到#topbar的父母。

Answer 2

您可以使用css String name功能。您只需将calc添加到侧边栏，然后将减法更改为顶部栏的高度。

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

Answer 3

试试这个：

#topbar {
  height: 40px;
  background: #ddd;
  border-bottom: 1px #aaa solid;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#sidebar_left {
  overflow-y: scroll;
  min-width: 150px;
  position: fixed;
  height: 100%;
  background: #f0f0f0;
  border-right: 1px #aaa solid;
  top: 41px;
  left: 0px;
  padding-right: 20px;
}

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

3 个答案: