css position fixed menu with 100% height and offset - html

Question

I want to create a menu on the left of a website. The main idea is how youtube is making it:
you have a bar at the top (fixed) and always 40px height and 100% width.
on the left you have the menu. you can open and close it with a button that is in the top bar. if the menu is open, you have the menu fixed on the left with an own scrollbar inside. The menu is 100% height-40px (from the top bar withdrawn).
When the menu is closed the content has 100% width and when the menu is open, the content has 100%-menu width.
The window scroll bar scrolles only the content. menu and top bar are fixed.
Here is a little example: http://output.jsbin.com/gehatitaxe
and also the same in fiddle:
<!-- http://jsfiddle.net/zyam1m79/ -->
But now I have the problem, that the menu with 100% can not withdraw the 40px from the top bar. so the inner scrollbar can scroll a littlebit out of the window (to the bottom). In the menu text there is an "x" at the end and it is impossible to read it when you scroll all to the menu bottom.
How can I fix this? How can I set a fixed element height to 100% and it does not take the window height but the height from en element in an higher level?
greetings and thanks for any help,
Christopher

Answer 1

You can use the CSS calc property to calculate 100% height minus the top bar. Example:
.main_left {
height: calc(100% - 40px);
/* ... */
}
I noticed you have padding on the top and bottom, so the 40px above will need to include that as well, therefore calc(100% - 120px);. Either that, or add box-sizing: border-box; so the padding doesn't add to the height of the container.

Answer 2

When using position: fixed, try avoiding using 100% width / height. Instead, use left: 0; right: 0 for 100% width and top: 0; bottom: 0 for 100% height. See the example below:
.table { display: table; } /* table */
.table > * { display: table-row; } /* tr */
.table > * > * { display: table-cell; } /* td */
/* main container */
.main{
position: relative;
min-width: 1024px;
}
/* top */
.main_head{
width: 100%;
height: 40px;
position: fixed;
left: 0;
right: 0;
top: 0;
transform: translateZ(0px);
z-index: 1999999999;
}
.main_head > div > div{ /* all + search */
border: 1px solid #000;
}
.main_head > div > div:first-child{ /* menu */
border: 1px solid #000;
}
.main_head > div > div:first-child > i{
font-size: 40px;
}
.main_head > div > div:last-child{ /* User information */
width: 400px;
}
/* Container menu + content */
.main_left_content{
}
/* left: menu */
.main_left{
width: 200px;
left: 0;
top: 0;
bottom: 0;
padding-top: 40px;
padding-bottom: 40px;
border: 1px solid #000;
position: fixed;
}
.main_left > div{
position: absolute;
background-color: red;
top: 40px;
bottom: 0;
left: 0;
right: 0;
overflow-y: scroll;
}
/* right: content */
.main_content{
border: 1px solid #000;
vertical-align: top;
}
<div class="main">
<div class="main_head table">
<div>
<div>
<i class="fa fa-bars fa-lg"></i>
</div>
<div>Suche</div>
<div>User Information</div>
</div>
</div>
<div class="main_left_content table">
<div>
<div class="main_left">
<div>
<div>
Menü<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />x
</div>
</div>
</div>
<div class="main_content">
Content<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />x
</div>
</div>
</div>
</div>