試圖將div放置在移動視口的底部，而不是瀏覽器的底部

我有一個div，我想要放在移動瀏覽器（Safari + Android）視口的底部。目前，我的div已經固定在Windows（IE，FF，Saf，Chrome，Opera）上所有前5個瀏覽器的底部，但這是「瀏覽器窗口」，而不是「視口」。試圖將div放置在移動視口的底部，而不是瀏覽器的底部

在移動設備上（我目前只在三星Galaxy Tab上使用過Android 2.2版本），div出現在頁面的底部，但是如果你捏/放大放大，固定div不會跟着。它停留在視口之外。

我特別使用position：fixed和bottom：0 CSS屬性來保持位置，正如我所說的，它在非觸摸瀏覽器上工作正常。

我將不得不通過掛鉤觸摸移動事件並查看（a）縮放級別（（））來使div保持在我想要的位置（在視口的底部） b）視口位置，和（c）滾動位置？

我正在使用JavaScript將div注入頁面，而不是使用內聯CSS。好的是，我不必擔心怪癖模式（因爲我只針對Webkit瀏覽器），所以這是一件好事。

我無法設置doctype，使用內聯CSS或內聯DIV。一切都必須通過JavaScript動態添加。這是我在我的測試已經完成爲止：

var mydiv=document.createElement("div"); 
mydiv.style.position="fixed"; 
mydiv.style.bottom="0px"; 
mydiv.id="floater"; 
mydiv.style.width="400px"; 
mydiv.style.height="50px"; 
mydiv.style.backgroundColor="yellow"; 
if(document.body)document.body.appendChild(mydiv); 
document.getElementById("floater").innerHTML="HELLO";

來源

2011-05-09 Dee2000

可能值得看[jQuery Mobile]（http://jquerymobile.com/）或[jQTouch]（http://jqtouch.com/）並查看它們如何保持工具欄不變。您還可以使用@media根據查看屏幕的客戶端設置應用不同的CSS。 – 2011-05-09 21:34:18

感謝Brad對兩個jQ〜的提示，我正在研究他們。「@media」是什麼意思？ – Dee2000 2011-05-10 06:29:53

Brad所指的是Media Queries：http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-你的網站/絕對值得期待！ – Dan 2011-05-17 00:25:44

你position:fixed不會在移動WebKit瀏覽器工作。在http://www.position-absolute.com/上查看the mobile webkit fixed position problem。他們有幾種保持底部的東西。

來源

2011-05-09 21:50:17

這是另一個基於iScroll的，它似乎（對我來說）是如何在div內滾動。 – Dee2000 2011-05-10 07:09:10

@ Dee2000您誤解了。 Safari webkit不支持'position：fixed'，它也不會滾動站點，它會滾動窗口。這些腳本（並且在那個鏈接中有兩個，你忽略了Pastry Kit）重新創建滾動和其他功能，以便你可以實現'position：fixed'的javascript版本。 – 2011-05-10 08:05:11

謝謝@Levi我下載了糕點套裝，並會考慮它。我剛剛休息了一會兒。原來我們不希望這個功能了。如果它回來了，希望會有一個很好的新標準 - 這樣做的方式:) – Dee2000 2011-05-11 15:28:25

退房iScroll：
http://cubiq.org/iscroll-4

這似乎是的更好的選擇了一個 - 絕對值得研究的。

我已經使用了以前的iScroll版本，但不幸的是有一些東西不能用於標準，所以我們不得不放棄這個想法。然而，Cubiq的人剛剛發佈了iScroll的v4版本，承諾修復以前版本中很多問題。

祝你好運！
Dan

來源

2011-05-10 04:20:58 Dan

我在發表帖子之前曾看過iScroll。它似乎只是創建允許您在div內滾動內容的內容。我不想「滾動我的div」，我希望我保持固定的可見位置，而不是滾動。或者我錯了？ – Dee2000 2011-05-10 06:28:42

iScroll的工作方式是，它可以讓您在固定頁眉和/或頁腳的同時設置「可滾動」區域。因此，「可滾動」區域是用戶可以在頁眉和/或頁腳停留在其固定位置時滾動瀏覽的視口。它對桌面網站的工作方式不同，因爲您並未將頁腳設置爲固定，而是設置了可滾動的區域。 – Dan 2011-05-17 00:24:29

試圖將div放置在移動視口的底部，而不是瀏覽器的底部

回答

相關問題