2016-11-14 71 views
1

我正在使用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%,並開始與窗體一起顯示,但是隨後在不同的屏幕尺寸下,右側出現了明顯的空白區域?我怎樣才能使它響應,以便清晰的空間不顯示?

refer to this image for better understanding

+0

也許'div#mapmap {width:calc(100% - 565px); height:100%; float:left;}' – codeninja93

+0

不需要calc。你可以設置最大寬度:px寬度,並設置寬度:100%;這將工作... :)目前你打算給40%的寬度... – yjs

回答

1

如果您不想在地圖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

+0

這是一個工作或標準方式,我的意思是我從來沒有見過這種做法,有沒有一個正常的方式來做到這一點,就像定義一個百分比25%另一個百分之75的作品完美的罰款,但在這種情況下,我不知道它爲什麼離開白色空間在右側? –

+0

哈哈..它當然不是一個解決方法...你可能沒有看到太多的東西,但這是一個很好的標準方法。讓我更新[MDN鏈接](https://developer.mozilla.org/en/docs/Web/CSS/calc)。只是因爲你還沒有碰到它,你真的不能說它是解決方法:) –

+0

對不起,我並不意味着用這個詞變通,我很抱歉,我只是想知道,當主div是100%的孩子是25%,孩子2是75%,所以當改變屏幕大小時,它不能有任何一方的空白區域,但與目前的情況下,即使我將565px的孩子轉換爲32%和100%到68%時,屏幕大小發生變化時會留下空白區域,根本沒有填充餘量。 –

相關問題