Изменить размер изображения при сворачивании боковой панели 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%? Я все еще хотел бы, чтобы макет оставался плавным, поэтому фактический размер в пикселях не сработает, я верю.