我遇到了一些问题，因为我的内容被截断(当窗口调整大小时)没有向下滚动的选项。我还使用了此处未包含的背景，但我认为即使使用黑色背景，我也会遇到同样的错误。我必须做什么才能允许在此处滚动？当使用“相对”功能放置我也在努力解决的内容时，我还将上传关于重叠内容的第二个问题。在这种情况下，我尝试在不使用 relative 的情况下构建页面，我的方法是一种“好”的方法吗？
注意:我两天前看了一个 YouTube 系列后才开始使用 html/css，所以请原谅我在这方面有多糟糕:)
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
position: fixed;
background: black;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
font-family: Open Sans;
color: #FFFFFF;
}
h1 {
margin: 0;
padding: 0;
}
#aboutus {
text-align: center;
margin-top: 15%;
}
#imageback {
content: "";
display:block;
position: fixed;
top: 0;
left: 0;
background: url('../images/ariana.jpg');
height: 100%;
width: 100%;
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
opacity: 0.4;
z-index: -2;
}
body div p {
padding: 0;
margin: 0;
}
.divcenter {
text-align: justify;
margin: 0 auto;
width: 50%;
}
/*Some Fade Stuff (Can be shortened with Jquery)*/
.fadeImage {
-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 3s; /* Firefox < 16 */
-ms-animation: fadein 3s; /* Internet Explorer */
-o-animation: fadein 3s; /* Opera < 12.1 */
animation: fadein 3s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 0.4; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 0.4; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 0.4; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 0.4; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 0.4; }
}<!doctype html>
<html lang="en">
<head>
<title>About Us</title>
<link href="styles/main.css" rel="stylesheet" type="text/css"/>
<meta charset="utf-8">
<link href="about.html" rel="alternate" hreflang="en"/>
<link href="about_pt.html" rel="alternate" hreflang="pt"/>
</head>
<body>
<div id="imageback" class="fadeImage"></div>
<header id="aboutus">
<h1>About Us</h1>
</header>
<div class="divcenter">
<p>
this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text
</p>
</div>
</body>
</html>最佳答案
您需要从 css 中的 body 中删除 position: fixed;，您基本上不能在 position:fixed 元素上放置滚动条
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
background: black;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
font-family: Open Sans;
color: #FFFFFF;
}
h1 {
margin: 0;
padding: 0;
}
#aboutus {
text-align: center;
margin-top: 15%;
}
#imageback {
content: "";
display:block;
position: fixed;
top: 0;
left: 0;
background: url('../images/ariana.jpg');
height: 100%;
width: 100%;
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
opacity: 0.4;
z-index: -2;
}
body div p {
padding: 0;
margin: 0;
}
.divcenter {
text-align: justify;
margin: 0 auto;
width: 50%;
}
/*Some Fade Stuff (Can be shortened with Jquery)*/
.fadeImage {
-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 3s; /* Firefox < 16 */
-ms-animation: fadein 3s; /* Internet Explorer */
-o-animation: fadein 3s; /* Opera < 12.1 */
animation: fadein 3s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 0.4; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 0.4; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 0.4; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 0.4; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 0.4; }
}<!doctype html>
<html lang="en">
<head>
<title>About Us</title>
<link href="styles/main.css" rel="stylesheet" type="text/css"/>
<meta charset="utf-8">
<link href="about.html" rel="alternate" hreflang="en"/>
<link href="about_pt.html" rel="alternate" hreflang="pt"/>
</head>
<body>
<div id="imageback" class="fadeImage"></div>
<header id="aboutus">
<h1>About Us</h1>
</header>
<div class="divcenter">
<p>
this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text this is just really long text
</p>
</div>
</body>
</html>关于html - 内容截断，不滚动(具体情况)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48213385/