0
Das Problem, das ich bekomme, ist, dass ich zwei Seiten habe, eine Seite mit Inhalt größer als die Höhe der Seite (die Seite, die Sie nach unten scrollen mussten)) und eine andere Seite mit weniger Inhalt als die Höhe der Seite.HTML: Seitenbreite erhöht, wenn Body Inhalt größer ist als Seite
Auf der Seite, die nach unten scrollt, wird die Breite der Seite (Kopfzeile, Fußzeile und Textkörper eingeschlossen) um 1 Pixel erhöht. Aber auf der Seite, die nicht nach unten scrollt, passiert das nicht.
Hier ist der Code für die Seite, die nach unten scrollt:
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>Der Code für die Seite ohne Scroll ist die gleiche, aber mit weniger Inhalt in <divcon>.