Hauteur de page différente avec une bordure

**JefReb** · 22/01/2014, 20h41

Bonjour à tous,
je sollicite les passionnés, car je tourne en rond et je ne trouve pas mon erreur.
J'utilise Codepen, mais si cela gène certains je peux mettre le source évidemment.
Pour montrer un exemple de site à des amis, j'ai fait un exemple simple.
Et pourtant ...
Dans cet exemple:
http://codepen.io/JefReb/pen/dbifK

Dans cet exemple, le pied de page (fond gris) n'est pas dans le conteneur #page en fond jaune.

Par contre, si je mets une simple bordure d'1px à #page en fond jaune
http://codepen.io/JefReb/pen/talGm

Le pied en gris est dans la page fond jaune, avec un margin-top:-25px;

Si j'enlève la bordure, le pied sort du fond jaune, si je remets une bordure le pied est bien là où je veux qu'il soit.

Je ne comprends pas mon erreur.
Merci d'avance.

**rodolphebrd** · 22/01/2014, 21h31

Bonjour,

c'est le principe de fusion des marges (je pense qu'on en avait déjà parlé).

Dans votre cas une bordure transparente fera l'affaire.

La fusion des marges peut-être évitée avec un padding, overflow ou border.
Exemple:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<section style="background: red; margin: 20px;">
  <p style="background: yellow; margin: 60px;">
    Lorem ipsum
  </p>
</section>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
section{
 /* Choisir parmi l'un des trois cas suivants :
  
  border:1px solid transparent;
  overflow:hidden;
  */
  padding: 1px 0;
}

http://codepen.io/anon/pen/Gncag

Je pense que vous devriez poster votre code (indenté) en plus de votre Codepen...

**JefReb** · 23/01/2014, 08h56

Merci Rodolphe,
Je ne pensais plus à cette fusion des marges en effet.
Je vais clore ce topic. merci
Pour la pérennité je place le code avec la solution.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
html, body 	{ margin:0; padding:0; height:100%; font-size:100%; font-weight:normal; }
body 		{ font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif; }
 
.largeur    { width:600px; margin:0 auto; }
.largeur-contenu    { width:550px; margin:0 auto; }
#bandeau 	{ height:205px; margin:0; padding:0; }
#page    { height:auto; min-height:280px; margin:0; padding:0; }
/* Pour #page il y a un problème de fusion des marges.
  Solution: il faut choisir parmi l'un des trois cas suivants :  
  border:1px solid transparent;
  overflow:hidden;
  padding: 1px 0;
*/
#page    { border:1px solid transparent }
 
.contenu { height:auto; min-height:250px; margin-bottom:30px; padding:10px; }
#menu    { width:500px; height:25px; margin:0 auto; margin-top:-25px; padding:0; }
#pied    { width:500px; height:25px; margin:0 auto; margin-top:-25px; padding:0; }
 
.backcol1 { background-color:#ccc; }
.backcol2 { background-color:#F69; }
.backcol3 { background-color:#FC0; }
.backcol4 { background-color:#0F9; }
.backcol5 { background-color:#666; }

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<body class="largeur backcol1">
<div id="bandeau" class="largeur backcol2">
</div>
 
<div id="menu" class="largeur backcol5"></div>
 
<div id="page" class="largeur backcol3">
    <div class="contenu largeur-contenu backcol4">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.</p>
    </div>
</div>
<div id="pied" class="backcol5"></div>
</body>