为什么我无法在我的页面上向下滚动

时间：2018-06-03 15:54:46

标签： html css

我无法在我的页面上向下滚动，我已经查找了溢出属性，将其从隐藏更改为滚动但仍无法正常工作。

我希望有人可以帮我解决这个令人沮丧的问题...... 我已经在溢出编辑器中粘贴了所有的css文件，所以你们可以看到出了什么问题。

这是我的源代码：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<!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>&copy; Copyright test</footer>
</body>


</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

您的页脚位于固定位置，这就是为什么它与您的身体内容重叠。

如果为页眉/页脚设置固定位置，请确保分别在顶部/底部设置主体的填充。

因此，在这种情况下，将主体的填充底部设置为页脚的高度将使内容可见。

将以下css行添加到您的身体标记。

body {
padding-bottom:58px; /* height of the footer */
}
相关问题
最新问题