在Android瀏覽器中的頁腳按鈕

我是新來的CSS和開發一個簡單的模板，將在Android瀏覽器內顯示。基本上我的模板只有兩個元素，一個錯誤信息和一個按鈕（應該放在頁腳處）。我已閱讀幾個帖子在stackoverflow。人們建議使用在Android瀏覽器中的頁腳按鈕

position:fixed; 
bottom: 0;

放置一個元素在頁腳。但是，當我添加了這個按鈕css時，似乎我的按鈕恰好放置在錯誤消息的下方，而不是在頁腳處。任何人有任何想法爲什麼？

  .fulfill-application-button{ 
      display: inline-block; 
      width: 100%; 
      zoom: 1; 
      margin: 0; 
      text-align: center; 
      cursor: pointer; 
      border: 1px solid #bbb; 
      overflow: visible; 
      font: bold 25px arial, helvetica, sans-serif; 
      text-decoration: none; 
      white-space: nowrap; 
      color: #555; 
      background-color: #ddd; 
      transition: background-color .2s ease-out; 
      background-clip: padding-box; 
      border-radius: 3px; 
      box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 
         0 2px 2px -1px rgba(0, 0, 0, .5), 
         0 1px 0 rgba(255, 255, 255, .3) inset; 
      text-shadow: 0 1px 0 rgba(255,255,255, .9); 
     } 

     .fulfill-application-button:hover{ 
      background-color: #eee; 
      color: #555; 
     } 

     .fulfill-application-button:active{ 
      background: #e9e9e9; 
      position: relative; 
      top: 1px; 
      text-shadow: none; 
      box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset; 
     } 

     .fulfill-application-button.color{ 
      color: #fff; 
      text-shadow: 0 1px 0 rgba(0,0,0,.2); 
     } 

     .fulfill-application-button.ok{ 
      position: relative; 
      bottom: 0; 
      padding: 10px 90px; 
      background-color: #c43c35; 
      border-color: #c43c35; 
     } 

     .fulfill-application-button.ok:hover{ 
      background-color: #ee5f5b; 
     } 

     .fulfill-application-button.ok:active{ 
      background: #c43c35; 
     } 

     html,body 
     { 
      padding: 15px; 
      height: 100%; 
      background-color: black; 
     } 

     div.error-message{ 
      color: white; 
      line-height: 120%; 
      padding-top: 20%; 
      font-size:30px; 
     } 
    </style> 
<body> 
     <div class ="error-message"> 
      ${error} 
     </div> 
     <button id="ok" type="button" class="color ok fulfill-application-button"> 
      OK 
     </button> 
</body>

來源

2016-08-02 user3369592

變化position: relative;到position: fixed;從.fulfill-application-button.ok類

代碼：

.fulfill-application-button.ok{ 
      position: fixed; 
      bottom: 0; 
      padding: 10px 90px; 
      background-color: #c43c35; 
      border-color: #c43c35; 
     }

注：你可以給right和left的一樣，如果你想要的。

來源

2016-08-02 07:09:07 RAN

它似乎仍然不工作.. – user3369592

請檢查：https://jsfiddle.net/uye4h5ok/ – RAN

謝謝，我正在開發一個Android應用程序，它顯示此模板使用「webview」。我認爲這可能是「webview」問題，而不是css。 – user3369592

在Android瀏覽器中的頁腳按鈕

回答

相關問題