I am trying to create a sidebar with CSS while also having a topbar in the same window. I have a <div id="topbar"> and a <div id="sidebar_left"> in my html file. In the topbar there are icons to open, save and load, etc. In the sidebar there is a list of files. If the list is longer than the window's height, it should be possible to scroll only the sidebar but not the whole page.

My 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;
}

My problem is that the sidebar is pushed down by the topbar's height and therefore is not visible pletely (it is cropped at the bottom). If I delete the topbar-div from my html file the sidebar is visible pletely. I think I could solve this with JavaScript by setting the sidebar's height to (window's height) - (topbar's height). Is there a way I can do it without JavaScript?

I am trying to create a sidebar with CSS while also having a topbar in the same window. I have a <div id="topbar"> and a <div id="sidebar_left"> in my html file. In the topbar there are icons to open, save and load, etc. In the sidebar there is a list of files. If the list is longer than the window's height, it should be possible to scroll only the sidebar but not the whole page.

My 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;
}

My problem is that the sidebar is pushed down by the topbar's height and therefore is not visible pletely (it is cropped at the bottom). If I delete the topbar-div from my html file the sidebar is visible pletely. I think I could solve this with JavaScript by setting the sidebar's height to (window's height) - (topbar's height). Is there a way I can do it without JavaScript?

• javascript
• html
• css

• Can you add a fiddle ? – Yasin Yaqoobi Commented Aug 2, 2016 at 22:22
• you will have to privide the HTML as well if you want a proper solution. do you use divs only, a header tag, ...? – Wolfgang Commented Aug 2, 2016 at 22:29
• @Wolfgang Here is the fiddle: jsfiddle/5cuxngw1 – niklassc Commented Aug 2, 2016 at 22:38
• @YasinYaqoob Here is the fiddle: jsfiddle/5cuxngw1 – niklassc Commented Aug 2, 2016 at 22:39

3 Answers 3

You can use the css calc function. You can just addheight: calc(100% - 80px); to your sidebar and change the the subtraction to whatever your topbar's height is.

Here is the W3Schools page about it: http://www.w3schools./cssref/func_calc.asp

Set #topbar position:fixed or position:absolute and give sidebar top offset for #topbars height.

In case of #topbar position:absolute remember to add position:relative to #topbar 's parent.

Try this:

#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;
}