我遇到的问题是我有两个页面,一个页面的内容大于页面的高度(您必须向下滚动的页面),另一个页面的内容小于页面的高度页面的。
在向下滚动的页面上,页面宽度(包括页眉、页脚和正文)增加 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>
里面的内容少了一点.
最佳答案
在检查我的代码后,我发现了问题所在,在更改
.Menu li
宽度值可以解决问题。
关于HTML:当正文内容大于页面时页面宽度增加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46511067/