Изменить размер изображения при сворачивании боковой панели jQuery

Я впервые пытался написать код и не знал, как сделать мой вопрос презентабельным, не используя весь код в 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

когда сайт находится в режиме ПК или на большом экране, боковое меню находится слева от изображения. Все же, когда свернуто, я хочу, чтобы изображение заполнило весь экран. Я использовал неправильный способ сворачивания бокового меню, чтобы изображение (карта) заполнило весь экран? Мое изображение просто смещается влево, а не изменяет размеры, как мне бы хотелось.

Посмотрев на слайд в dw, я понял, что, поскольку я использую жидкостную сетку, div для моей карты установлен на 66.3003%, следовательно, он не меняется на 100%. Можно ли изменить CSS CIV до 100%? Я все еще хотел бы, чтобы макет оставался плавным, поэтому фактический размер в пикселях не сработает, я верю.

0 ответов

Другие вопросы по тегам