28172 sujets

CSS et mise en forme, CSS3

Barre de défilement complète

Bonjour,

J'essaie de créer un document HTML avec des DIV et du CSS. J'ai globalement réussit à faire ce que je souhaite sauf un petit détail : j'aimerai qu'une barre de défilement apparaisse à droite sur la totalité de la page lorsque le texte est trop grand pour s'afficher dans la DIV "corps". Actuellement, cela fonctionne que sur la DIV, mais j'aimerai que cela se fasse sur toute la page...

Les DIV "entete" et "pied" doivent avoir une taille fixe et la page doit occuper tout l'espace de l'écran lorsque qu''il y a peu de texte. (pour le moment tout fonctionne !).

Voici mon code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Premier document HTML</TITLE>

	<style>
      #entete {
        position: fixed;
        width: 100%;
        height: 50px;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
		background-color:#f1f1f1;
      }
      #cote {
        position: fixed;
        width: 10em;
        height: auto;
        top: 50px;
        right: auto;
        bottom: 50px;
        left: 0;
		background-color:#a1a1a1;
      }
      #corps {
        position: fixed;
        width: auto;
        height: auto;
        top: 50px;
        right: 0;
        bottom: 50px;
        left: 10em;
		overflow:auto;
      }
      #pied {
        position: fixed;
        width: 100%;
        height: 50px;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
		background-color:#424242;
      }
    </STYLE>
  </HEAD>
  <BODY>
  
	
    <DIV id="entete"> entete  </DIV>
	<div id="main">
		<DIV id="cote"> menu  </DIV>
		<DIV id="corps"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 	 </DIV>
	</div>
    <DIV id="pied"> bas de page  </DIV>
	
  </BODY>
</HTML>



Avez-vous une idée ? Merci.
Bonjour,


je ne suis pas un grand spécialiste de CSS, mais dans ta définition de style concernant l'objet #corps, tu as un height :auto et un overflow : auto.

or, il me semble, que si la hauteur est automatique, tu ne peux pas avoir un overflow, puisque la hauteur va s'adapter au contenu. il faudrait lui mettre une hauteur fixe.

à tester Smiley cligne
Merci pour ta réponse, j'ai supprimé tout les "auto", l'affichage souhaité reste identique mais cela ne corrige pas mon problème Smiley decu Aucune barre de défilement apparait.
Hello,

C'est surtout le position: fixed sur #corps qui t'empêche d'arriver à tes fins. Pourquoi le positionner en fixed ?
Salut,

Oui sans cette option les barres de défilements apparaissent, mais j'ai utilisé cette option car sans elle, la DIV passe en dessous de la DIV du haut (entete) et sous la DIV de droite (cote).
Pour information, j'ai résolu mon problème en supprimant effectivement "fixed" sur #corps et en ajoutant des marges pour sur la DIV corp ne passe pas de dessous de la DIV du haut et de gauche.


Merci pour votre aide !
Sujet clos
Aller à