折叠侧边栏jQuery时更改图像大小

Question

第一次尝试进行任何编码，并且不确定如何在不使用jsfiddle中的整个代码的情况下使我的问题成为可能。

html：

<div class="gridContainer clearfix">
  <div id="header">
    <p id="headtitle">
      <button id="switch">Header Button to close Menu</button>
    </p>
  </div>
  <div id="sidebar" class="ui-accordion" style="">

js：

  $(document).ready(function(){

  $("#switch")
  .button()
  .click(function(){

      $("#sidebar").toggle("slide");
  });
});

css：

#sidebar {
    clear: both;
    float: left;
    margin-left: 0;
    width: 32.6007%;
    display: block;
}
#map {
    clear: none;
    float: left;
    margin-left: 1.0989%;
    width: 66.3003%;
    display: block;
}

我的jsfiddle

当网站处于pc模式/更大屏幕时，侧面菜单位于图像的左侧。然而，当折叠时，我希望图像填满整个屏幕。我是否使用了错误的方法来折叠侧面菜单以便图像（地图）将填满屏幕？我的图像只是左移，而不是调整我想要的大小。

在看了dw中的幻灯片之后，我意识到自从使用流体网格布局后，我的地图div设置为66.3003％，因此它没有变为100％。是否可以将div的css更改为100％？我仍然希望布局保持流畅，所以我相信实际的px大小是不行的。