使用带有可隐藏菜单的宽度

Question

我在两个DIV上设置大小时遇到​​问题。

我喜欢这个

<div id="parent">
  <div id="menubar">
  Menu
  </div>
  <div id="pagecontent">
  Content, other divs
  </div>
</div>

因为有时我想使用屏幕的整个宽度来显示内容，所以我可以隐藏/切换（jquery）菜单栏DIV。

CSS：

#parent{
    position:           relative;
    width:              100%;
    height:             100%;
}
#menubar{
    height:             100%;
    width:              170px;
    background-color:   #404040;
    color:              white;
    float:              left;
}
#pagecontent{
    width:              100%;
    position:           absolute;
}

现在的问题是pagecontent是它的父级的全宽，只有当菜单栏被隐藏时才应该这样。当菜单栏未被隐藏时，内容的宽度应为100％-170px。

如何在CSS中解决这个问题？

编辑：使用jquery修复：

$( "#topbarmenutoggle" ).click(function() {
      $( "#menubar" ).toggle()
      if ($( "#menubar" ).is(':visible')){
            $("#pageinnercontent").width('calc(100% - 170px)');
            $("#pageinnercontent").css('left', '170px');
      }else{
            $("#pageinnercontent").width('100%');
            $("#pageinnercontent").css('left', '0px');
      }
    });