100% Höhe Element nicht bewegt auf mobilen

Meinen Code100% Höhe Element nicht bewegt auf mobilen

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<style> 
    html,body {margin: 0;padding: 0;box-sizing: border-box;} 
    html{ 
     height: 100%; 
    } 
    body{ 
     height: 100%; 
    } 
    .app { 
     height: 100%; 
    } 
    .page { 
     height: 100%; 
     background: linear-gradient(to bottom, #c2e59c , #64b3f4); 
     position: relative; 
    } 
    .chat { 
     height: 100%; 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     right: 0; 
     left: 0; 
     overflow: scroll; 
    } 
    p{ 
     padding: 155px 5px; 
     border: solid 1px red; 
    } 
</style> 
</head> 
<body> 
<div class="app"> 
    <div class="page"> 
     <div class="chat"> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      </p> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      </p> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      </p> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      </p> 
     </div> 
    </div> 
</div> 
</body> 
</html>

Dies ist eine einfache ganze Seite Chat-Box. Es sieht gut aus. Nur ein Problem, es kann nicht gut auf Mobilgeräten blättern, es hört auf zu scrollen, wenn Sie sich berühren, es hat keine Kontinuität wie es sollte.

Irgendeine Idee warum ist das?

Live-Demo für den mobilen Test: http://demo.thatilike.com

Anmerkung: Sie wird das Problem nicht auf Chrom mobilen Modus sehen, muss sie auf echte mobile

Quelle

2017-02-04 angry kiwi

hinzufügen -webkit-overflow-scrolling: touch; auf dem rollbaren Element getestet werden. Dies wird dem Element auf Touch-Geräten ein dynamisches Scrollen hinzufügen. Aber gehen Sie sicher, overflow-y: scroll für den Desktop zu verlassen.

Quelle

2017-02-05 05:11:31 startamovement

was meinst du mit leave 'overflow-y: scroll' für den Desktop? –

Ich meine, lassen "Überlauf: Scroll" für Non-Touch-Geräte. – startamovement

100% Höhe Element nicht bewegt auf mobilen

Antwort

Verwandte Themen