Position fest inner div nicht scrollen

Ich habe dieses HTML und CSS. Das Problem ist, ich möchte scrollen inneren div aber Position behoben sollte nicht entfernt werden.Position fest inner div nicht scrollen

body { 
 
       position: fixed; 
 
      } 
 
      div { 
 
       overflow-y: scroll; 
 
       height:100%; 
 
      }

<body> 
 
     <div> 
 
     Sohail Hussain 
 
     <br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS 
 
     <br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS 
 

 
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
 
     ABCDEFGHI 
 
     </div> 
 
    </body>

Quelle

2016-05-25 sohail.hussain.dyn

ähnliche https://jsfiddle.net/LeoLion/k2212qaz/ –

Für % Höhe des Elternelement eine Höhe arbeiten muss. In Ihrem Fall haben und <body> keine Höhe.

und es ist keine gute Praxis, die Positionierung von <body> zu ändern. Packen Sie Ihren Inhalt besser in eine <div> und passen Sie stattdessen seine Position an.

html, 
 
body { 
 
    height: 100%; 
 
} 
 
body { 
 
    position: fixed; 
 
} 
 
div { 
 
    overflow-y: scroll; 
 
    height: 100%; 
 
}

<div> 
 
    Sohail Hussain 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/>FDSFSDFDSFS 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/>FDSFSDFDSFS 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/>FDSFSDFDSFS 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/>FDSFSDFDSFS 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/>FDSFSDFDSFS 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/>FDSFSDFDSFS 
 

 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/>ABCDEFGHI 
 
</div>

Quelle

2016-05-25 09:25:22

Dank es für mich gearbeitet. Nur noch eine Frage, wenn ich ein paar dumpfe Effekte hinzufügen möchte, füge ich hinzu: -webkit-overflow-scrolling: touch; manchmal bleibt das Scrollen hängen. Irgendeine Lösung davon? –

@ sohail.hussain.dyn dafür können Sie eine neue Frage stellen (versuchen Sie, vor dem Posten zu recherchieren) –

Sie müssen height: 100vh auf div für Fensterhöhe verwenden, oder müssen Sie height: 100% auf Körper

body {position: fixed;} 
 
div { 
 
    overflow-y: scroll; 
 
    height:100vh; 
 
}

<body> 
 
    <div> 
 
    Sohail Hussain 
 
    <br/><br/><br/><br/><br/><br/><br/><br/> 
 
    FDSFSDFDSFS 
 
    <br/><br/><br/><br/><br/><br/><br/><br/> 
 
    FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
    FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
    FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
    FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
    FDSFSDFDSFS 
 
    FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
    FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
    FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
    FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
    FDSFSDFDSFS 
 
    FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
    FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
    FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
    FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
    FDSFSDFDSFS 
 

 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
 
    ABCDEFGHI 
 
    </div> 
 
</body>

Quelle

2016-05-25 09:26:54

Prozenthöhe im div anzuwenden muss auch eingestellt werden Ed die Höhe 100% für Ihre Eltern div. Einfach zu nutzen:

body{ 
position: fixed; 
height: 100%; 
}

Hier ist das Beispiel:

body { 
 
    position: fixed; 
 
    height: 100%; 
 
} 
 
div { 
 
    overflow-y: scroll; 
 
    height:100%; 
 
}

<div> 
 
     Sohail Hussain 
 
     <br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS 
 
     <br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
     FDSFSDFDSFS 
 

 
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
 
     ABCDEFGHI 
 
     </div>

Quelle

2016-05-25 09:31:27

Position fest inner div nicht scrollen

Antwort

Verwandte Themen