0
Мой код в нижней части, он не работает, потому что много файлов на моем компьютере, но он показывает основную концепцию этой картины моего сайтаDiv не пройдя весь путь вниз по экрану
так как вы можете видеть на первом изображении, прокручивают вниз есть пустое пространство, которое раздражает, так как высота составляет 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>
Кстати, если вы хотите, чтобы увидеть мою проблему браузера размер в размер iPhone. – mobinblack
Есть ли причина установить его на 65%? –
Посмотрите на код запуска, вот почему. – mobinblack