如何佈置此頁面？

-2

我想要編排這樣一個頁面：screenshot1,screenshot2。如何佈置此頁面？

頁面包含三個部分 - 標題（橙色部分），內容（粉色部分），頁腳（藍色部分） - 頁眉和頁腳將固定在屏幕上。內容將在需要時滾動。與此同時，當您關注三個輸入（位於不同部分）中的任何一個時，鍵盤無法覆蓋輸入，其他部分也不會。

我嘗試了一些方法，但我找不到與所有移動瀏覽器兼容的完美方法。

在中國有一個名爲UC的怪異瀏覽器，在版本9.0 UC中，當鍵盤顯示時，頁面末尾有一個空白區域。在您觸摸屏幕並滾動頁面like this the blank area in the end of page之前，此空白區域不會消失。

我檢查了這個區域拋出的Winer，空白區域不是HTML的一部分，已經被這個問題困惑了。

我需要你的幫助！有什麼建議嗎？

我已經試過這個佈局：

HTML：

<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title></title> 
 
    {{wing.view('pages/demo/css')}} 
 

 
</head> 
 
<body> 
 

 
<div id="doc"> 
 
    <div class="header">this is header 
 
     <div>input some chinese chars:<input type="text"/></div> 
 
    </div> 
 
    <div class="content">this is content 
 
     <div>input some chinese chars: 
 
      數學庫 - 開源中國社區 
 
      Math.js 是個JavaScript 和寫真—Tag—電影網—www.M... 電影網 
 
      <input type="text"/></div> 
 
    </div> 
 
    <div class="footer">this is footer 
 
     <div>input some chinese chars:<input type="text"/></div> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

CSS（少）：

@import url(../lang/base.less); 
 

 
html, body, #wing-page-content, #doc { 
 
    height: 100%; 
 
} 
 

 
#doc { 
 
    .display(); 
 
    .flex-direction(column); 
 

 
} 
 

 
.content { 
 
    .flex(); 
 
    background-color: #f99690; 
 
} 
 

 
.header { 
 
    height: 44px; 
 
    background-color: #e76000; 
 
} 
 

 
.footer { 
 
    height: 44px; 
 
    background-color: #0073FD; 
 
} 
 

 
.content { 
 
    overflow-y: auto; 
 
    -webkit-overflow-scrolling: touch; 
 

 
}

base.less --->https://github.com/codio/Flex.less/blob/master/flex.less

來源

2015-12-17 kiwizhang

你能告訴你的代碼？你試過什麼了？另外請注意格式，你的問題看起來很混亂。這是一個網頁或Android應用程序？ – Luciano

這是爲應用程序，這是一個混合應用程序。這個頁面應該運行在Android應用程序和ios應用程序中。android應用程序的webview基於UC broswer webkit內核，並且ios應用程序基於ios sdk webkit。 – kiwizhang

<html> 
    <body style="height:100%; width:100%"> 
    <div id="header" style="position:absolute; top:0px; left:0px; height:200px; right:0px;overflow:hidden;"> 
    </div> 
    <div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; right:0px; overflow:auto;"> 
    </div> 
    <div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; right:0px; overflow:hidden;"> 
    </div> 
    </body> 
</html>

來源

2015-12-17 10:02:52 MinFu

如何佈置此頁面？

回答

相關問題