2016-11-20 2 views
0

Мой код в нижней части, он не работает, потому что много файлов на моем компьютере, но он показывает основную концепцию этой картины моего сайтаобертка не распространяющие весь путь вниз страницы

Scrolled

Unscrolled

так как вы можете видеть на первом изображении, прокручивают вниз есть пустое пространство, которое раздражает, так как высота составляет 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>

+0

Пожалуйста, добавьте свой код в ваш вопрос. Вы можете сделать это, используя Ctrl + M. Вы можете добавить HTML и CSS. –

+0

Просто зайдите в кодекс. – mobinblack

+0

Да, я знаю. Но если в какой-то момент эта ссылка нарушена, вопрос недействителен для будущих посетителей этого вопроса. –

ответ

0

Не 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

Чтобы содержимое пролистывать все окно, сохраняя при этом раздел Б.Г., где она есть, не делают игра divs детей из bg.

Смотрите обновленный codepen:

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

+0

Теперь он не будет прокручиваться, я добавил переполнение: скрыто до HTML, тело. Затем я добавил обертку вокруг bg, в которой есть игры, и установите ее на высоту: 100% и переполнение: прокрутка. – mobinblack

+0

Проверьте код в моем ответе. Меня устраивает. Не упоминал, что вам нужно установить отображение: блок, а также его прокрутку. –

+0

Как я могу прокручивать его на iphone? – mobinblack

Смежные вопросы