我的代码在底部，它不起作用，因为很多文件都在我的计算机上，但是它显示了基本概念，这是我网站的图片
Scrolled
Unscrolled
因此，您可以在向下滚动的第一张图片上看到，由于高度为65％，所以有一个令人讨厌的空白区域。第二个图像只是一个未滚动的图像。
所以我的问题是如何使它从65％降到屏幕底部。顺便说一句，我不能制作这个position:fixed，因为当我添加更多内容时，我无法滚动浏览游戏。
顺便说一下，对于解决方案，我希望仍然能够正常向下滚动页面，而不仅仅是使div.bg可滚动。
html,body{
height:100%;
background:url(http://i.imgur.com/DBjloQv.jpg);
background-size:cover;
-webkit-background-size:cover;
}
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
ul.nav{
list-style:none;
margin:0;
padding:0;
overflow:hidden;
background-color:rgba(0,0,0,0.65);
position:absolute;
bottom:65.5%;
left:0;
width:100%;
}
li.nav{
float:left;
}
a.nav:visited,a.nav:link{
color:rgb(230,230,230);
text-decoration:none;
display:block;
text-align:center;
padding:14px 16px;
font-family:'Open Sans', sans-serif;
}
a.nav:hover{
color:rgb(255,255,255);
}
.active{
color:rgb(255,255,255) !important;
}
div.bg{
position:absolute;
margin:0 auto;
display:block;
text-align:center;
left:0;
bottom:0;
width:100%;
height:65%;
background-color:rgba(0,0,0,0.65);
}
div.game{
display:inline-block;
position:relative;
width:279px;
height:375px;
margin:5px 11px;
border-radius:1px;
background:url(http://i.imgur.com/rGCA5cd.png);
-webkit-background-size:cover;
background-size:cover;
cursor:pointer;
}
div.gametext{
position:absolute;
display:block;
width:100%;
height:25%;
bottom:0;
left:0;
background-color:rgba(0,0,0,0.9);
color:white;
font-family:'Open Sans',sans-serif;
font-weight:600;
font-size:20px;
}
p.gametext{
color:white;
font-family:'Open Sans',sans-serif;
font-weight:600;
font-size:20px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Home - <?php $activeid=0; include"php/globalvars.php";echo $name;?></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/home.js" charset="utf-8"></script>
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/home.css">
</head>
<body>
<div class="bg">
<div class="game" id="4"><div class="gametext"><p class="gametext">Battlefield 4</p></div></div>
<div class="game" id="22"><div class="gametext"><p class="gametext">Battlefield 1</p></div></div>
<div class="game" id="19"><div class="gametext"><p class="gametext">Rocket League</p></div></div>
</div>
<ul class="nav">
<li class="nav"><a href="index.php" class="nav active" onclick="return false;">Logo Here</a></li>
<li class="nav" style="float:right;"><a href="signin.php" class="nav>Sign In</a></li>
</ul>
<?php
if(isset($_GET['id'])){
$href;
switch($_GET['id']){
case 4:
$href="Battlefield4";
break;
case 22:
$href="Battlefield1";
break;
case 19:
$href="RocketLeague";
break;
}
Header("Location: /game/".$href.".php");
}
?>
</body>
</html>最佳答案
您可以灵活更改顶部边距，因此这是我的解决方案：
div.bg{
position:absolute;
margin-top:10em; //However much that is required
display:block;
text-align:center;
left:0;
bottom:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.65);
}
关于html - div不会一直向下移动到屏幕上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40700363/