私がスクロールした場合、ページ下部に固執しない

Question

タイトルには、絶対配置されたdivがあり、bottom:0;がありますが、まだ完全には進まないことを示しています。ここから分かるように、http://imgur.com/a/pZrewフッターの高さは65％で、サイズを縮小するまで拡大されません。

基本的には、画面の一番下にいつでも置くことができますが、ページの上部には65％しかありません。

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 class="bg"> 
 
    <div class="game bf4"><div class="gametext"><p class="gametext">Battlefield 4</p></div></div> 
 
    <div class="game bf1"><div class="gametext"><p class="gametext">Battlefield 1</p></div></div> 
 
    <div class="game rl"><div class="gametext"><p class="gametext">Rocket League</p></div></div> 
 
</div>

Answer 1

あなたはページをスクロールすると一番下にあなたのdivを修正したい場合は、単にfixedにその位置を変更します。

div.bg { 
    position:fixed; 
    ... 
} 

あなたが大と子のdivのを持っている場合高さ：これを試してください：

div.bg { 
    position: absolute; 
    display: table; /*display:block;*/ 
    top:35%; /* instead of height:65%; */ 
    ... 
} 

.game{ 
    display: table-row; 
    ... 
} 

Answer 2

あなたはこの

div.bg { 
    position:fixed; 
    bottom:0; 
    right:0; 
    left:0; 
    height:40vh; 
} 

Answer 3

position: absolute;が位置プロパティtop、right、bottomとleftへの関連する要素を必要としてみることができます。これは、がに位置する最初の（最も近い）祖先要素に関連します。つまり、ブロックレベルの要素の既定値はposition: static;ではありません。配置された祖先要素がない場合は、bodyに関連します。 MDNから

：

position: absolute;：要素のためのスペースを残してはいけません。代わりに、それが最も近い位置にある祖先に対して指定された位置にあればそれを配置します。