Javascript 将内容分为2部分，并将内容填入全身

我想做一些类似的事情：

-----------------------
|  menubar            |
------------------------
|                     |
|                     |
|     50%  height,    |
|     100% width      |
|                     |
------------------------
|                     |
|                     |
|     50%  height,    |
|     100% width      |
|                     |
-------------------------

然而，每当我试图将内容高度设置为100%时，它就消失了

body {
    margin: 0;
    background-color: grey;
}

#content {
    width: 100%;
    height: 380px;   <---------here, if I change is to height: 100%;
    overflow: auto;
}

#table {
    width: 100%;
}

th {
    background-color: yellow;
}

td {
    background-color: #DDDDDD;
}

#tableholder {
    background-color: white;
    width: 100%;
    height: 50%;
}

#canvasholder {
    background-color: black;
    width: 100%;
    height: 50%;
}

正文{
保证金：0；
背景颜色：灰色；
}
#内容{
宽度：100%；
高度：380px；为
菜单栏指定一个明确的高度，然后使用
calc
将内容区的高度从
100%
降低

相关CSS：

#menubar {
    height: 64px;
}
#content {
    width: 100%;
    height: calc(100% - 64px);   
    overflow: auto;
}

演示小提琴：

注意：正如@Ruddy所指出的，
calc
是特定于CSS3的，并且只在现代浏览器中工作。如果您需要支持旧/旧浏览器，那么这将是一个问题

在这种情况下，一个简单的替代方法是对菜单栏使用百分比高度，并对内容使用剩余高度

.
菜单栏的样式在哪里？您可能想指出，这是使用CSS3，而calc的支持有限。谢谢@Ruddy.Added。
#menubar {
    height: 64px;
}
#content {
    width: 100%;
    height: calc(100% - 64px);   
    overflow: auto;
}