Question

我正在尝试在Google地图的左侧显示侧边栏。侧边栏宽度为380px，我需要地图画布div来占用剩余的宽度，但到目前为止我没有运气。

map div必须声明宽度和高度，否则它不起作用。我试图找到一个宽度100％减去X像素的解决方案，但在这种情况下它们没有工作。

有没有人知道该怎么做？

感谢。

我试过这个，但看起来它不适用于地图画布div：

$(document).ready(function(){
$(window).width();  
$(document).width();

var width1 = $(document).width();
var width2 = $("#left").width();

var canvas_width = width1 – width2 + "px";

$('#map_canvas').width = canvas_width;

}）;

Answer 1

我遇到了完全相同的问题，但设法解决了这个问题。

例如，如果侧边栏div宽度为200px，请在Google地图编写内容的div周围设置一个额外的div容器。

对于那个div-container集

position: absolute;
left: 200px;
right: 0;
height: 100%

在调整大小时也像魅力一样。如果此解决方案与您的情况不符，请与我们联系。

Answer 2

我正在做这个（也是侧边栏+ GM）相对宽度和最小宽度。我可以切换侧边栏可见/不可见。要保存原始值，请参阅：Getting values of global stylesheet in jQuery）。

顺便说一下，我认为你在js中的赋值是错误的，它应该是element.**style**.width或jQuery $("#id").width(value)： How to set width of a div in percent in JavaScript?

风格：

#sideBar {
float: left;
width: 27.5%;
min-width: 275px;
height: 100%;
z-index: 0;
}

#sideBarLocation div {
display: inline;
}

#mapCanvas
{
width: 72.5%;
min-width: 725px;
height: 100%;
float: left;
z-index: 0;
}

使用HTML：

<div id="sideBar">
            <!-- tab location starts here -->
            <table id="sideBarLocation" class="sideBarStandard">
            ...
            </table>
</div>
....
<!-- side bar ends here -->
<div id="mapCanvas"></div>

设置谷歌地图画布宽度100％减去侧边栏宽度？

2 个答案: