如何修復100％高度佈局（jQuery Mobile和Google Map）的底部？

我有一個佈局，我希望主要內容區域是剩餘空間的100％高度。所以我幾乎在那裏，但底部被截斷（這影響縮放和居中）。底部有41px被截斷，這是頭部區域的度量：http://jsfiddle.net/GTscW/如何修復100％高度佈局（jQuery Mobile和Google Map）的底部？

我之所以知道它是否被切斷是因爲我沒有看到Google地圖的版權信息。這裏是不截斷，但截斷頂端（我剛剛從#content。內容內容中刪除頂部：41px）：http://jsfiddle.net/GTscW/1/

如何從第一個示例的底部減去41px以獲取內容100％剩餘區域？

編輯：

我能添加眼前這個：$（ '＃含量.inner內容'），高度（$（本）.height（） - $（ '＃頭'） .height（）），但真的沒有CSS解決方案，雖然???

來源

2012-07-08 TruMan1

一個問題是，混合百分比和像素測量並不容易，因爲不同的屏幕尺寸行爲會有所不同。但可以使用API功能讓地圖在任何尺寸的屏幕上按照您希望的方式行事。

使地圖成爲屏幕大小的100％，因此標題遮擋了地圖的一部分。抑制默認的地圖控件，使其不會出現部分遮擋。創建一個與標題大小相同的空白自定義控件，並將其放置在地圖的頂部。當地圖控件添加回來時，自定義控件會將它們推出平時的位置，以便它們在可見地圖上正確顯示。

var posn=google.maps.ControlPosition; // shorten the reference 

// Add empty custom control 
var controlDiv = document.createElement('div'); 
controlDiv.style.width='100%'; 
controlDiv.style.height='41px'; 
map.controls[posn.TOP_LEFT].push(controlDiv); 
map.controls[posn.TOP_RIGHT].push(controlDiv); 

// Add map controls 
map.setOptions({ 
    mapTypeControlOptions:{position:posn.RIGHT_TOP}, 
    mapTypeControl:true, 
    panControlOptions:{position:posn.LEFT_TOP}, 
    panControl:true, 
    streetViewControlOptions:{position:posn.LEFT_TOP}, 
    streetViewControl:true, 
    zoomControlOptions:{position:posn.LEFT_TOP}, 
    zoomControl:true 
})

http://jsfiddle.net/GTscW/4/

注1：由於地圖是比它看起來（你的情況）實際上41px更大，中心點會比查看地圖的中心高20像素。這可能不值得擔心。如果是，則處理明顯的中心點是another question on SO的主題。

注2：此方法無法獲得固定的頁腳，，因爲Google徽標和條款鏈接始終位於地圖的底部，[當前]不會移動以避免控制。

來源

2012-07-08 08:34:53

我編輯您的撥弄着一個解決方案：

基本上，創建一個看起來像這樣的功能：

function remainder() { 
    $("*[height=\"remainder\"]").each(function(index, element) { 
     var offsetParent; 
     var target = $(element); 
     if (element==$("body")[0]) { 
      offsetParent = $("html"); 
     } 
     else { 
      offsetParent = target.offsetParent(); 
     } 
     var position = target.position(); 
     var heightParent = offsetParent.height(); 
     var extras = target.outerHeight(true)-target.height(); 
     var remainderHeight = heightParent-position.top; 
     target.height(remainderHeight-extras); 
    }); 
}

對於希望佔據頁面的其餘部分的元素，做這樣的：

最後，當您的文檔已準備就緒：

$(document).ready(function() { 
    remainder(); 
});

來源

2012-07-08 12:35:50 user1417684

在CSS中只有你可以嘗試使用一招：上position: absolute屬性同時使用top和bottom屬性，像我一樣，你的提琴：http://jsfiddle.net/GTscW/23/

不知道它的工作原理無處不在，但。

來源

2013-05-06 12:15:15 Grsmto

如何修復100％高度佈局（jQuery Mobile和Google Map）的底部？

回答

相關問題