Question

我一直在为学校项目创建一个网站。我在页面底部有一些信息，但是当我打开页面并测试它时，我无法向下滚动以查看此信息。我试过溢出：滚动我的页面但它仍然看不到工作。我想知道是否有人可以帮助解决这个问题？

<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;
}

Answer 1

首先，您的代码缺少正常结构：头标记未关闭，所有内容都在body标记之外（为空）。有效的html代码是页面最重要的部分。其次，关于溢出问题 - 你可能需要添加“bottom：0;”到。简介。如果有帮助，请告诉我们。

由于

在页面上向下滚动时遇到问题

1 个答案: