EisregenGruss36 EisregenGruss36 - 4 months ago 9
CSS Question

Creating a sidebar with CSS while also having a topbar

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 completely (it is cropped at the bottom).
If I delete the topbar-div from my html file the sidebar is visible completely.
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?

Answer

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.com/cssref/func_calc.asp