div fixe devrait être scrollable

Question

je structure suivante dans mon code:

<div id="layerContentLayer"> 
    <div id="layerContentLayerHead"> 
     <img class="imageLogo" src="/img/logo.png"> 
    </div> 
    <div id="layerContentLayerBody"> 
     <div class="areaContentLayerText"> 
      <div class="contentItem" id="contentItem-99"> 
       <div class="contentItem-inner"> 
        <div class="head"></div> 
       </div> 
      </div> 
      <div class="areaContentForm"></div> 
     </div> 
    </div> 
</div> 

Mon CSS ressemble à ceci:

#containerContentLayer { 
    opacity: 1; 
    background: #FFF; 
    background-image: none; 
    background-repeat: repeat; 
    width: 100%; 
    height: 100%; 
    z-index: 10; 
    top: 0; 
    left: 0; 
    position: fixed; 
    background-image: url('/img/Background_Contact.jpg'); 
    background-repeat: no-repeat 
} 
#layerContentLayer { 
    width: 1000px; 
    background-color: #f5f5f5; 
    margin: 50px auto 0 auto; 
} 

Ceci est une couche qui va être ouvert en cliquant sur un lien . En cela, il y a un formulaire de contact avec des entrées et des étiquettes et aussi une image de fond qui est affichée: aucune dans la vue mobile (plus petit que 800px). Si j'ouvre le site avec cette structure, le calque s'ouvre mais je ne peux ni faire défiler ni balayer (peu importe si je regarde le site sur mon téléphone mobile ou sur le navigateur).

J'ai essayé de définir un autre attribut overflow-y: scroll mais cela n'a pas réussi.

Que dois-je changer à propos de mon code que le défilement/balayage fonctionne?

Answer 1

J'espère avoir bien compris votre requête. Vous devez d'abord définir #layerContentLayer à une hauteur spécifique pour que le navigateur sache quelle taille utiliser (il peut s'agir de px,% ou autre). Deuxièmement, vous devez le définir à overflow-y: scroll; (ou auto ...).

Voici un exemple violon: https://jsfiddle.net/64z8ef30/