我无法在我的页面上向下滚动，我已经寻找溢出属性将其从隐藏更改为滚动，但它仍然不起作用。
我希望有人能帮我解决这个令人沮丧的问题...... 我已将我所有的 css 文件粘贴到溢出编辑器中，这样你们就可以看到出了什么问题。
这是我的源代码:
body {
font-family: sans-serif;
font-size: 16px;
font-weight: 400;
overflow: scroll;
}
div.gallery1 {
border: 5px solid #2f354e;
border-radius: 10px;
width: 300px;
background: #17c;
}
div.table-title {
display: block;
max-width: 600px;
padding:5px;
width: 100%;
}
.table-title h3 {
color: #000;
font-size: 30px;
font-weight: 400;
font-style: normal;
font-family: Helvetica, arial, sans-serif;
text-transform: uppercase;
}
.table-fill {
background: white;
border-radius:3px;
border-collapse: collapse;
height: 320px;
max-width: 600px;
padding:5px;
width: 100%;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
animation: float 5s infinite;
}
th {
color:#D5DDE5;
background:#1b1e24;
border-bottom:4px solid #9ea7af;
border-right: 1px solid #343a45;
font-size:23px;
font-weight: 100;
padding:24px;
text-align:left;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
vertical-align: middle;
}
th:first-child {
border-top-left-radius: 3px;
}
th:last-child {
border-top-right-radius: 3px;
border-right: none;
}
tr {
border-top: 1px solid #C1C3D1;
border-bottom-: 1px solid #C1C3D1;
color:#666B85;
font-size:16px;
font-weight:normal;
text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
tr:hover td {
background:#4E5066;
color:#FFFFFF;
border-top: 1px solid #22262e;
}
tr:first-child {
border-top:none;
}
tr:last-child {
border-bottom:none;
}
tr:last-child td:first-child {
border-bottom-left-radius:3px;
}
tr:last-child td:last-child {
border-bottom-right-radius:3px;
}
td {
background:#FFFFFF;
padding:20px;
text-align:left;
vertical-align:middle;
font-weight:300;
font-size:18px;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
border-right: 1px solid #C1C3D1;
}
td:last-child {
border-right: 0px;
}
th.text-left {
text-align: left;
}
th.text-center {
text-align: center;
}
th.text-right {
text-align: right;
}
td.text-left {
text-align: left;
}
td.text-center {
text-align: center;
}
td.text-right {
text-align: right;
}
/**********************/
body {
margin: 0;
padding: 0;
/* Location of the image */
background-image: url("http://kb4images.com/images/red-wallpaper-hd/37940982-red-wallpaper-hd.jpg");
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
}
h1 {
color: white;
}
p {
font-family: Impact, Charcoal, sans-serif;
font-size: 20px;
}
/**********************/
/*------Nav-------*/
header {
width:100%;
position: fixed;
}
header nav {
width:100%;
background:#2f354e;
}
.menu_bar {
display:none;
}
header nav ul {
overflow:hidden;
list-style:none;
margin: 0px;
padding: 0px;
}
header nav ul li {
float:left;
}
header nav ul li a {
color:#fff;
padding:14px;
display:block;
text-decoration:none;
}
header nav ul li span {
margin-right:10px;
}
header nav ul li a:hover {
background:red;
text-decoration: none;
color:#ffffff;
}
@media screen and (max-width:800px ) {
header nav {
width:150px;
height:100%;
left:-100%;
margin:0px;
position: fixed;
}
header nav ul li {
display:block;
float:left !important
}
.menu_bar {
display:block;
width:100%;
background:#ccc;
text-align:center;
}
.menu_bar .bt-menu {
display:block;
padding:20px;
background:#2f354e;
color:#fff;
text-decoration:none;
font-weight: bold;
font-size:25px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.menu_bar span {
float:right;
font-size:30px;
}
}
/*--------End of the nav-------*/
/*-------- Generic styles-------*/
body{
overflow: scroll;
margin:0px;
font-family: sans-serif;
}
/*-------- Generic styles-------*/
body {
color: #fff;
}
footer {
background: #2f354e;
bottom: 0;
left: 0;
padding: 20px 0;
position: fixed;
right: 0;
text-align: center;
}<!DOCTYPE html>
<html>
<title>test</title>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="favicon/popcorn-32.png">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/loader.css">
<link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/filmtoevoegen.css">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
<script src="js/loader.js"></script>
</head>
<body>
<header>
<div class="menu_bar">
<a href="#" class="bt-menu"><span class="fa fa-bars"></span>test</a>
</div>
<nav>
<ul>
<li><a href="adminindex.php"><span class="fa fa-home"></span>Admin dashboard</a></li>
<li style="float:right"><a href="logout.php"><span class="fa fa-sign-out"></span>Loguit</a></li>
</ul>
</nav>
</header>
<br>
<br>
<br>
<br>
<br>
<center>
<div class="gallery1">
<h3>Film toevoegen</h3>
</div>
<br>
<br>
<table class="table-fill">
<thead>
<tr>
<th class="text-left">Film:</th>
<th class="text-left">Sales</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td class="text-left">Genre:</td>
<td class="text-left">$ 50,000.00</td>
</tr>
<tr>
<td class="text-left">Film omschrijving:</td>
<td class="text-left">$ 10,000.00</td>
</tr>
<tr>
<td class="text-left">Datum van uitkomst:</td>
<td class="text-left">$ 85,000.00</td>
</tr>
<tr>
<td class="text-left">Datum uit bioscoop:</td>
<td class="text-left">$ 56,000.00</td>
</tr>
<tr>
<td class="text-left">Film draai dagen:</td>
<td class="text-left">$ 98,000.00</td>
</tr>
<tr>
<td class="text-left">Zaal:</td>
<td class="text-left">$ 98,000.00</td>
</tr>
<tr>
<td class="text-left">Film afbeelding:</td>
<td class="text-left">$ 98,000.00</td>
</tr>
</tbody>
</table>
</center>
<footer>© Copyright test</footer>
</body>
</html>最佳答案
您的页脚位于固定位置，这就是它与您的正文内容重叠的原因。
如果为页眉/页脚设置固定位置，请确保分别在顶部/底部设置主体的内边距。
所以在这种情况下，将 body 的 padding-bottom 设置为页脚的高度将使内容可见。
将下面的 css 行添加到您的 body 标签。
body {
padding-bottom:58px; /* height of the footer */
}
关于html - 为什么我无法在我的页面上向下滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50668240/