我一直在为一个学校元素创建一个网站。我在页面底部有一些信息，但是当我打开页面并测试它时，我无法向下滚动以查看这些信息。我已经在我的页面上尝试过 overflow:scroll，但它仍然无法正常工作。我想知道是否有人可以帮助解决这个问题？
<html>
<head>
<meta charset="utf-8">
<title>Homepage</title>
<link rel="stylesheet" type="text/css" href="Style.css">
<div class="Head">
<div class="Head-box" style="background-color:#BDBDBD;">
</div>
<div onClick="window.location = 'Homepage.html';" class="Home">Home</div>
<div onClick="window.location = 'Activities.html';" class="Activities">Activities</div>
<div onClick="window.location = 'Cafe.html';" class="Cafe">Cafe</div>
<div onClick="window.location = 'Bookings.html';" class="Bookings">Bookings</div>
<div onClick="window.location = 'Contact.html';" class="Contact">Contact Us</div>
<div>
<img src="Assets/Feild1.jpg" class="Image1" style="vertical-align:central" />
<div class="Introduction">
Welcome to the Out and up website!
</div>
</div>
<body>
</body>
</html>
The CSS:
body,html {height:100%; margin:0; padding:0;}
body {
background-color:#CDCDCD;
overflow:scroll;
}
h1 {
color: navy;
margin-left: 20px;
}
.Head {
position: relative;
display: block;
}
.Head input {
padding-left: 20px;
}
.Head .Head-box {
width: 100%;
height:34px;
display:inline-block;
background-color:#ABABAB;
position:static;
top:-50px;
left:-8px;\
right:-100px;
margin-right:;
}
.Image1 {
width:100%;
height:auto;
position:relative;
margin-top:10px;
z-index:20;
left:-0.5px;
}
.Home {
width:60px;
height:30px;
background-color:transparent;
margin-left:92%;
margin-top:10px;
text-align:center;
padding-top:8px;
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
.Home:hover {
background-color:#E38600;
text-decoration:underline;
}
.Activities {
width:75px;
height:30px;
background-color:transparent;
margin-left:86%;
margin-top:-38px;
text-align:center;
padding-top:8px;
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
text-decoration:none;
z-index:10;
}
.Activities:hover {
background-color:#E38600;
text-decoration:underline;
}
.Cafe {
width:50px;
height:30px;
background-color:transparent;
margin-left:82%;
margin-top:-38px;
text-align:center;
padding-top:8px;
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
.Cafe:hover {
background-color:#E38600;
text-decoration:underline;
}
.Bookings {
width:75px;
height:30px;
background-color:transparent;
margin-left:76%;
margin-top:-38px;
text-align:center;
padding-top:8px;
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
.Bookings:hover {
background-color:#E38600;
text-decoration:underline;
}
.Contact {
width:90px;
height:30px;
background-color:transparent;
margin-left:69%;
margin-top:-38px;
text-align:center;
padding-top:8px;
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
.Contact:hover {
background-color:#E38600;
text-decoration:underline;
}
.Introduction {
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size:20px;
position:fixed;
margin-top:300px;
text-align:center;
width:100%;
display:block;
}
最佳答案
首先，您的代码缺少正常结构:head 标签未关闭，所有内容都在 body 标签之外(为空)。有效的 html 代码是页面中最重要的部分。 其次，关于溢出问题——您可能需要添加“bottom:0;”到 .介绍。如果有帮助，请告诉我们。
谢谢
关于html - 在页面上向下滚动时遇到问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27863190/