Faire défiler le contenu de la page dans une zone spécifique?

Question

Je conçois un site Web qui a des éléments fixes sur les bords extérieurs d'une disposition à largeur fixe. Une div au centre est réservée au contenu. Lorsque l'utilisateur fait défiler, je veux que tout le contenu (en plus desdits éléments de navigation extérieurs fixes) reste à l'intérieur des limites de cet élément central.

Voici un aperçu de ce que mockup je veux dire: alt text http://i35.tinypic.com/15s3cax.png

je pourrais mettre très facilement la propriété de débordement de l'élément central de l'auto, et ont tout rester à l'intérieur. Cependant, il est très important qu'une barre de défilement ne soit pas présente sur le bord de cet élément.

En fait, je me demande comment soit:

• soumise à une limite à cette zone (peut-être que je pourrais changer la taille et positionnement de l'élément du corps - est qui a permis - et? puis positionner les éléments fixes à l'extérieur du corps
• Masquer la barre de défilement qui apparaît à l'intérieur du div lors de l'utilisation overflow:. auto

Toute aide serait grandement appréciée!

Answer 1

Si possible, vous devez casser vos éléments de position fixe en 4 sections distinctes (haut, gauche, droite et bas). Ensuite, assurez-vous de pad zone de contenu centre par leurs largeurs respectives et les hauteurs de sorte que le contenu ne soit pas chevauché:

HTML

<!-- 4 fixed position elements that will overlap your content --> 
<div id="top"></div> 
<div id="left"></div> 
<div id="right"></div> 
<div id="bottom"></div> 

<div id="content"> 
    <!-- Your content --> 
</div> 

CSS

html, body { 
    height: 100%; 
} 

#top, #left, #right, #bottom { 
    position: fixed; 
    left: 0; 
    top: 0; 
    z-index: 2; 
    background: red; 
} 

#top, #bottom { 
    width: 100%; 
    height: 20px; 
} 

#bottom { 
    top: auto; 
    bottom: 0; 
} 

#left, #right { 
    height: 100%; 
    width: 20px; 
} 

#right { 
    left: auto; 
    right: 0; 
} 

#content { 
    position: relative; 
    z-index: 1; 
    padding: 25px; /* prevent content from being overlapped */ 
} 

Vous peut le voir in action here.

Notez également la position: relative sur la zone de contenu. C'est ainsi que z-index fonctionne correctement et que le contenu est affiché en dessous des sections fixes.

Si vous vous souciez de IE6/7, vous aurez besoin d'ajouter un CSS expression fix pour obtenir la position fixe fonctionne correctement dans les impressionnants navigateurs.