1

第一次尝试进行任何编码，并且不确定如何在不使用 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 大小不起作用。

4

0 回答 0