[Résolu] Div scrollable dans div non scrollable (avec images)

Bonjour,
J'aimerai avoir au milieu de ma page web la photo d'un smartphone (juste le cadre). Au milieu de celui, j'aimerai avoir une autre image mais scrollable. Le but et qu'on puisse scroller dans le smartphone sans que le contenu de l'intérieur dépasse du cadre.

Si je découpe mon image de smartphone en plusieurs parties (haut, bas et centre), ça fonctionne avec le code suivant :

<img id="top" src="img/top.jpg"/>
        <div id="phone">
          <div id="posts">
            <img src="img/posts.jpg"/>
          </div>
        </div>
        <img src="img/bottom.jpg"/>

#phone{
	background-image: url("../img/middle.jpg");
	width: 450px;
	height: 925px;
	z-index:2;
}
#posts{
	height: 100%;
	overflow: scroll;
	z-index:1;
	margin-top: 85px;
	margin-left: 10px;
}
#top{
	margin-bottom: -107px;
}

Mais je désire n'avoir que deux images différentes, à savoir "mobile.jpg" qui correspond au cadre de mon smartphone et "content.jpg" qui correspond au contenu scrollable et non pas 4 images comme dans mon exemple.

Pouvez-vous m'indiquer sur quel structure partir ?
Modifié par pimous (27 Jun 2016 - 16:01)

Bonjour,

Et ien ta réflexion est déjà bien avancée... tu as tout dis :

a écrit :
deux images différentes, à savoir "mobile.jpg" qui correspond au cadre de mon smartphone et "content.jpg" qui correspond au contenu scrollable

il te faut donc ces deux images.
Au niveau de la structure j'aurais fait quasiment la meme que toi :

 <div id="phone">
       <div id="screen">
            <img src="img/posts.jpg"/>
       </div>
</div>

La div#phone avec la bonne taille et l'image du contour du téléphone en background-image.
La div#screen placé en absolute par rapport a div#phone et avec la taille de l'écran et un overflow:auto;

T'y est quasiment

"La div#phone avec la bonne taille et l'image du contour du téléphone en background-image.
La div#screen placé en absolute par rapport a div#phone et avec la taille de l'écran et un overflow:auto;"

Yep, merci pour tes conseils