css如何在自动调整宽度时依赖一个div到另一个

我正在使用Google地图在我的网站上显示，问题是目前地图有CSS属性FIXED，而在左侧我有一个预留的窗体，我遇到的问题是，我不希望我的地图100％也落后于我希望我的谷歌地图在窗体旁边开始的形式，因为我已经创建了一个虚拟div，将其作为窗体的精确像素并尝试浮动离开了形式，但我不知道为什么谷歌地图正在考虑100％的宽度，整个页面让我分享代码，使球员更好地了解，css如何在自动调整宽度时依赖一个div到另一个

这是大型的div我创建

div#mapcontainermega { 
    height: 100%; 
    position: fixed !important; 
    left: 0; 
    z-index: 1; 
    top: 0; 
    right: 0; 
    bottom: 0; 
}

此DIV有两个div的形式的div是形式宽度

div#mapcenterdiv { 
    width: 565px; 
    height: 100%; 
    float: left; 
}

，然后在地图上的div在其内部谷歌地图位于的确切像素，

div#mapmap { 
    width: 100%; 
    height: 100%; 
    float: left; 
}

现在的问题是当我尝试将宽度降低到40％，并开始与窗体一起显示，但是随后在不同的屏幕尺寸下，右侧出现了明显的空白区域？我怎样才能使它响应，以便清晰的空间不显示？

来源

2016-11-14 Ubaid Rehman

也许'div＃mapmap {width：calc（100％ - 565px）; height：100％; float：left;}' – codeninja93

不需要calc。你可以设置最大宽度：px宽度，并设置宽度：100％;这将工作... :)目前你打算给40％的宽度... – yjs

如果您不想在地图100％的宽度&动态猜宽度，然后使用CSS的calc()功能

div#mapmap { 
    width: calc(100% - 565px); 
    height: 100%; 
    float: left; 
}

我仍然建议给予%宽度表单而不是px，然后只是分开2个孩子的div之间的宽度

了解它 - https://developer.mozilla.org/en/docs/Web/CSS/calc

来源

2016-11-14 12:03:26

这是一个工作或标准方式，我的意思是我从来没有见过这种做法，有没有一个正常的方式来做到这一点，就像定义一个百分比25％另一个百分之75的作品完美的罚款，但在这种情况下，我不知道它为什么离开白色空间在右侧？ –

哈哈..它当然不是一个解决方法...你可能没有看到太多的东西，但这是一个很好的标准方法。让我更新[MDN链接]（https://developer.mozilla.org/en/docs/Web/CSS/calc）。只是因为你还没有碰到它，你真的不能说它是解决方法:) –

对不起，我并不意味着用这个词变通，我很抱歉，我只是想知道，当主div是100％的孩子是25％，孩子2是75％，所以当改变屏幕大小时，它不能有任何一方的空白区域，但与目前的情况下，即使我将565px的孩子转换为32％和100％到68％时，屏幕大小发生变化时会留下空白区域，根本没有填充余量。 –

css如何在自动调整宽度时依赖一个div到另一个

回答

相关问题