Мой код в нижней части, он не работает, потому что много файлов на моем компьютере, но он показывает основную концепцию этой картины моего сайтаобертка не распространяющие весь путь вниз страницы
так как вы можете видеть на первом изображении, прокручивают вниз есть пустое пространство, которое раздражает, так как высота составляет 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>
Пожалуйста, добавьте свой код в ваш вопрос. Вы можете сделать это, используя Ctrl + M. Вы можете добавить HTML и CSS. –
Просто зайдите в кодекс. – mobinblack
Да, я знаю. Но если в какой-то момент эта ссылка нарушена, вопрос недействителен для будущих посетителей этого вопроса. –