18073 sujets

Questions générales et questions de débutants

Le padding provoque l'affichage de deux scrollbars verticales

Bonjour,

Je m'initie au CSS. J'ai retravaillé mes pages pour faire disparaître les tables de positionnement.

Je suis parti de l'exemple 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<title>Deux zones avec scroll en CSS</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style type="text/css">
/* CSS issu des tutoriels css.alsacreations.com */
html, body {
height: 100%;
width: 100%;
overflow: auto;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#contenu {
height: 100%;
margin-left: 200px;
overflow: auto;
background-color:#9999CC;
}
#menu {
position: absolute;
left:0;
background-color: #99CCCC;
width: 200px;
height: 100%;
}
</style>
</head>

<body>

<div id="menu">ici le Menu<br /> <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous les modèles)</a>

</div>

<div id="contenu">
	contenu<br />
</div>

</body>
</html>


Si je rajoute "padding: 20 px;" dans l'id #contenu, la marge fonctionne mais deux scrollbars verticales apparaissent. Smiley decu

J'ai cherché sur différents forums... sans résultat

Merci pour votre aide !
Administrateur
Bonjour Régis et bienvenue Smiley cligne

Ton #contenu fait déjà 100% de haut.
Donc, selon le modèle de boite de IE, si tu appliques un padding sur cet élément, la valeur du padding s'ajoute à sa hauteur.
Il fera donc plus de 100% de hauteur, donc des barres apparaîtront.

IE est assez énervant avec son modèle de boite non standard.
Mais il existe quelques astuces pour le contourner :
Voici un tutoriel rapide et voici une Méthodologie complète.

Bonne chance Smiley cligne
J'ai testé la page sur firefox et konqueror... le résultat est le même. Est-il possible que ces navigateurs utilisent le modèle de boite de IE ?? Smiley eek
Raphael a écrit :

Ton #contenu fait déjà 100% de haut.
Donc, selon le modèle de boite de IE, si tu appliques un padding sur cet élément, la valeur du padding s'ajoute à sa hauteur.


Heu désolé raphael mais c'est le contraire la situation que tu décris correspond au box model standard.

à régis >

2 possiblités

1. tu exprimes ton padding en % et tu te débrouilles pour avoir un total de 100% (mais problème d'équivalence de rendu en vue avec IE < 6)

2. Tu envisages quelque choses comme ceci



<div id="contenu">
<p id="firstelement"></p>

...

<p id="lastelement"></p>
</div>


(J'ai mis <p> mais il peut s'agir d'un autre élément)

et css


#contenu {
height:100%;
}

#firstelement {
margin-top:40px;
}


#lastelement {
margin-bottom:40px;
}


++
Modifié par clb56 (11 Jun 2005 - 13:03)
Sujet clos
Aller à