view raw
EisregenGruss36 EisregenGruss36 - 9 months ago 34
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.


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

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?


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: