0
Le problème que j'obtiens est que j'ai deux pages, une page dont le contenu est supérieur à la hauteur de la page (la page que vous devez faire défiler vers le bas), et une autre page dont le contenu est inférieur à la hauteur de la page.HTML: La largeur de la page augmente lorsque le contenu du corps est supérieur à la page
Sur la page qui défile vers le bas, la largeur de la page (en-tête, pied de page et corps inclus) augmente de 1px. Mais sur la page qui ne défile pas, cela n'arrive pas.
Voici le code de la page qui défile vers le bas:
html, body {
opacity: 1;
padding: 0;
margin: 0;
height: 100%;
transition: 0.7s opacity;
}
body.fade-out {
opacity: 0;
transition: none;
}
a {
color: black;
}
.Menu, .Menu ul {
padding: 0;
margin: 0;
list-style: none;
width: 25%;
}
.Menu li {
width: 15em;
}
.Menu li ul {
position: absolute;
left: -999em;
}
.Menu li:hover ul {
left: auto;
}
.Menu li:hover ul, .Menu li.sfhover ul {
left: auto;
background-color: green;
}
.Menu a {
color: black;
text-decoration: none;
display: block;
}
.Menu a:hover {
background-color: #dcefdc;
}
.Menu div a {
padding-top: 10px;
}
.Menu div a:hover {
height: 50px;
}
#container {
min-height: 100%;
position: relative;
}
#header {
border-top:3px solid #242729;
align-content: center;
background-color: #5f5f5f;
width: 100%;
height: 90px;
font-family: TheLightFont;
font-size: 37px;
letter-spacing: 3px;
color: #555555;
display: block;
margin: auto;
}
#divmen {
font-family: TheLightFont;
font-size: 150%;
}
#logo {
align-content: center;
}
#Title {
width: 100%;
}
#body {
padding: 0.1px;
padding-bottom: 60px; /* Height of the footer */
}
#divcon {
display: block;
margin-left: 37%;
margin-top: 6em;
font-family: TheLightFont;
padding-bottom: 100px;
}
#footer {
background-color: #242729;
width: 100%;
height: 110px;
position: absolute;
bottom: 0px;
font-family: Hangar;
}
/*----------fonts----------*/
@font-face {
font-family: TheLightFont;
src: url('TheLightFont.ttf');
}
@font-face {
font-family: Hangar;
src: url('HANGAR_flat.ttf');
}
.Menu {
float: left;
text-align: center;
background-color: #4CAF50;
}
.Menu div a.current{
height: 50px;
}
.Menu a.current {
background-color: #242729;
color: white;
}<div id="container">
<div id="header"><!-content here-></div>
<div id="body">
<div id="divmen"><!-content here-></div>
<div id="divcon"><!-content here-></div>
</div>
<div id=footer><!-content here-></div>
</div>Le code de la page sans défilement est le même, mais avec moins de contenu en <divcon>.