$（document）.height和$（window）.height都返回相同的值 - 正確使用doctype

我正在設置浮動動作按鈕，就像Google的新材質設計一樣。這是jQuery的我現在使用：

$(document).ready(function() { 
    var doc = $(document).height(); 
    var height = $(window).height(); 
    var offset = height - 20 ; 
    console.log(doc); 
    console.log(height); 
    console.log(offset); 
    $("#floating_nav_container").css("top",""+ offset +"px"); 
});

我希望能夠檢測到視口的高度，並有底部之上我的行動按鈕顯示爲20px。

我的「floating_nav_container」是一個絕對定位的div內的引導「col-md-6」父母的div，我已經爲900px的測試目的設置了一個固定的高度。

有時$(document).height()可以獲得900的權利，其他時候則不可以; $(window).height總是與文檔1相同。

我的文檔類型是：

<!DOCTYPE html>

我已經在這裏讀的是通常的處理辦法時，這兩種方法返回相同的值。

編輯：我試圖在3列布局內完成此操作。「floating_nav_container」僅適用於中間列。將CSS設置爲底部爲20px的固定位置不起作用，因爲取決於視口大小，操作按鈕可能會在第三列或列的外部顯示。

如果將「floating_nav_container」設置爲已固定，並將代碼設置爲中間列的子級，則其行爲與在DOM頂部設置的行爲相同。

我選擇將它絕對定位在中間列中，因爲不管瀏覽器如何重新調整大小，它都保留在父容器中。問題是當頁面超出視口的高度時，按鈕消失。

我的希望是找到一種方法來計算高度，並讓它動態確定視口底部的偏移應該適用於任何設備。

來源

2015-04-07 HisPowerLevelIsOver9000

你能提供一個小提琴這個問題嗎？因爲在控制檯中這會返回兩個不同的數字。所以我覺得很難重現這個問題。或者也許是一個網址？ –

@JasonvanderZeeuw感謝您的回覆！我在這裏建了一把小提琴 https://jsfiddle.net/m3wh2g74/ – HisPowerLevelIsOver9000

我想出了一個這個解決方案在我這裏使用一些建議的解決方案最適合我。如果有人在將來遇到類似的問題，那麼我做的所有事情都是最簡單的。

我將「#floating_nav_container」移出中間列，以便它不是任何東西的孩子。

的「#floating_nav_container」的CSS是這樣的：

#floating_nav_container { 
position:fixed; 
bottom:20px; 
right:40px; 
z-index:10; 
}

這得到它正確定位於移動應用，但不留中間一列中的按鈕一旦設計擴展到桌面尺寸。

爲確保按鈕始終保持在中間列內，我使用媒體查詢將其設置爲「正確」爲31％。

@media (min-width: 992px) { 
    #floating_nav_container { 
    right:31%; 
    } 
}

我的佈局是由具有自舉和第3列是「COL-MD-3」，其是視口的可用寬度的總是25％。通過將「#floating_nav_container」上的權利設置爲31％，我使它能夠在設計縮放時始終保持隱藏在中間列內。

一旦右列被刪除，然後只在中間列仍然是在「#floating_nav_container」踢的默認CSS和處理顯示。

這完全消除了我需要使用jQuery。

來源

2015-04-07 18:30:46 HisPowerLevelIsOver9000

我建議你完全做到這一點在CSS，以防止任何錯誤：

#floating_nav_container { 
    position: absolute; 
    bottom: 20px; 
}

來源

2015-04-07 15:08:30 floribon

感謝回覆@floribon！我有這樣的權利的CSS現在（同時測試的功能我已經註釋掉我的底部），但是從父div的底部把它20像素和它然後從視圖中隱藏屏幕 – HisPowerLevelIsOver9000

上那麼你真的需要它作爲其父母的孩子？你不能把這個元素放在DOM中嗎？ – floribon

我只將它作爲父級的孩子，因爲當我在桌面視圖中使用該網站時，佈局是3列，中間列是具有交互內容的那一列，因此我想嘗試將操作按鈕保留在父母欄，所以它不會混淆人。如果我把它先在DOM，使固定的位置，它總是停留在我想要的時候，屏幕是手機大小......但 – HisPowerLevelIsOver9000

移動#floating_nav_container父DIV之外，並使用@ floribon的解決方案。此外，如果您希望它始終位於底部20像素，即使滾動時將位置設置爲固定。

#floating_nav_container{ 
    position:fixed; 
    bottom:20px; 
}

我在這裏增加了一個搗鼓你https://jsfiddle.net/9v9u8ybp/

來源

2015-04-07 15:19:26

感謝當我重新大小到桌面它不是漂亮@floribon！我已經設置了這種方式開始，但它給了我一個不希望的桌面顯示器，我的佈局是3列，只有中間是交互式的，我希望「floating_nav_container」表現得好像它是固定的，但在中間欄。 @NickDelaney – HisPowerLevelIsOver9000

那小提琴看起來不錯！無論如何要添加另一列內容並讓「floating_nav_container」始終在其中固定？非常感謝您花時間幫助我解決這個問題！ @NickDelaney – HisPowerLevelIsOver9000

@MikerT我更新了小提琴https://jsfiddle.net/9v9u8ybp/3/。它使用jQuery，就像你最初一樣。 –

對於元素的視感知定位，使用CSS來代替jQuery的JS或像這樣：

#floating_nav_container { 
    position: fixed; 
    bottom: 20px; 
}

來源

2015-04-07 15:40:47

$（document）.height和$（window）.height都返回相同的值 - 正確使用doctype

回答

相關問題