Question

我的代码位于底部，它不起作用，因为我的计算机上有很多文件，但它显示了我的网站图片的基本概念

因此，您可以看到第一个向下滚动的图像，因为高度为65％，所以有一个空白区域很烦人。第二张图片只是一张未展开的图片。

所以我的问题是如何让它从65％变为屏幕底部。顺便说一下，我不能做这个position:fixed，因为当我添加更多内容时，我无法滚动游戏。

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>

Answer 1

不是100％肯定为什么它会滚动一点，但是如果你添加

  overflow: hidden;

在bg（你的标签）的父节点上它停止滚动。

新css：

html,body{
  height:100%;
  overflow: hidden;
}

要让游戏滚动，我想你可以添加一个这种风格的包装：

div.scroller {
  display: block;
  height: 100%; 
  overflow: scroll;
}

我用更多的游戏更新了笔，这些游戏按照我认为你想要的方式滚动。

（将特定的css从codepen添加到答案中）

http://codepen.io/anon/pen/QGdBRx

要允许内容滚动整个窗口，同时保持bg部分的位置，不要让游戏对bg的孩子进行分割。

请参阅更新的codepen：

http://codepen.io/anon/pen/pNROvQ

包装器不会一直延伸到页面

1 个答案: