0
문제는 내가 두 페이지, 즉 페이지 높이보다 큰 페이지 (페이지를 아래로 스크롤해야 할 것입니다.), 그리고 페이지의 높이보다 더 적은 내용을 가진 다른 페이지.HTML : 본문 내용이 페이지보다 클 때 페이지 너비가 증가합니다.
페이지의 너비가 내려간 페이지 (머리글, 바닥 글 및 본문 포함)가 1px 씩 증가합니다. 그러나 아래로 스크롤하지 않는 페이지에서 이것은 발생하지 않습니다.
여기 아래로 스크롤 페이지에 대한 코드입니다 :
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>스크롤없이 페이지에 대한 코드는 동일하지만 <divcon>에 적은 내용으로.