固定頁眉和頁腳在點擊時變得流離失所

我在我的jquery移動應用程序中遇到了固定頁眉和頁腳的問題。如果我點擊屏幕上的固定頁眉和頁腳不再固定，它們會變得流離失所，但我不知道如何修復它。任何意見來解決這個錯誤？我已經創建了一個fiddle。固定頁眉和頁腳在點擊時變得流離失所

<div style="height:100%; width:100%" class="ui-page" data-role="page" data-position="fixed" id="main"> 
     <div style="height:10%"" data-role="header" data-position="fixed"> 
      <a class="ui-btn-left" name="backo" data-icon="back" data-rel="button" ></a> 

     <h1>title</h1> 
     </div> 
     <div style="height:100%; width:100%" data-role="content" id="container"> 
<ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow"> 
    <div style="width:95%;padding-right:5%;" id="chatOutput"> 

    </div> 
    </ul> 
     <div style="height:15%; width:100%;background-color:#e9eaed;border: 0px;border-color: transparent;" data-role="footer" data-position="fixed"> 

    <div style="width:96%;padding-right:2%;padding-left:2%" class="ui-grid-a"> 
     <div style="height:100%;width:80%" class="ui-block-a"><input type="text" id="chatText" paceholder="type your text here"></div> 
     <div style="height:100%;width:20%" class="ui-block-b"><button style="font-size:90%" class="ui-btn ui-shadow ui-icon-carat-r" id="chatSend">send</button></div></div> 

     </div> 
     </div> 
     </div>

編輯：我發現這個：$("[data-role=header]").toolbar({ tapToggle: false });它工作正常。

來源

2016-02-27 Droidboyx

試加'位置：absolute' – guradio

慣於變化......在更好的方式看：https://jsfiddle.net/yTt9b/1519/ – Droidboyx

更改此：

<div style="height:10%"" data-role="header" data-position="fixed">

要這樣：

<div data-role="header" data-position="fixed">

而且，也改變這一點：

<div style="height:15%; width:100%;background-color:#e9eaed;border: 0px;border-color: transparent;" data-role="footer" data-position="fixed">

要這樣：

<div style="background-color:#e9eaed;border: 0px;border-color: transparent;" data-role="footer" data-position="fixed">

Updated jsfiddle

Updated jsfiddle with persistent message box

幾個圖片的標題說明：

聯樣式一般是不是一個好主意;改用樣式表。
像「div」這樣的塊元素不需要寬度：100％;它們將默認擴展爲全角。
驗證您的HTML代碼中有錯誤的內置瀏覽器的開發工具，或在線工具，如validator.w3.org來

來源

2016-02-27 08:35:41

好的，謝謝你改變標題中的位移，但不要更新小提琴的頁腳問題：http://jsfiddle.net/yTt9b/1524/ – Droidboyx

@Droidboyx我沒有看到任何明顯的錯誤。你在找什麼行爲？ –

頁腳應固定在底部。如果我點擊中間的頁腳運行到文檔的按鈕，但它應該始終在屏幕的按鈕上。 :) – Droidboyx

添加data-tap-toggle="false"頁眉和頁腳的div內。

這將防止自來水頁眉/頁腳的切換/點擊

來源

2016-03-02 17:06:02 damianchapsmith

固定頁眉和頁腳在點擊時變得流離失所

回答

相關問題