デスクトップなどのモバイルデバイスでフッターの視差効果を設定するにはどうすればよいですか？

Question

デスクトップ上で完全に動作している視差効果付きの背景イメージとフッターがありますが、モバイルデバイスでは動作しません。フッターを表示するために背景画像をスクロールできません。私はデスクトップのようなフッターをチェックするために画像をスクロールする必要があります。これで私を助けてくれますか？

CSS

body{ 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 

    #content { 
     background-image: url('http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Travel-Tourist-Images-Pictures-800x600.jpg'); 
     background-size: cover; 
     width: 100%; 
     height: auto !important; 
     background-position: center; 
     min-height: 100%; 
     margin-bottom: 180px; 
     z-index: 1; 
     background-repeat: no-repeat; 

    } 

    #footer { 
     position:fixed; 
     bottom:0; 
     left:0; 
     width:100%; 
     height:200px; 
     z-index:-1; 
     background-color:#000; 
     color: #fff; 

    } 

.column-left{ float: left; width: 33%; } 
.column-right{ float: right; width: 33%; } 
.column-center{ display: inline-block; width: 33%; } 
.column-left, .column-right, .column-center 
{ 
    margin-top: 30px; 
} 

HTML

<div id="content"> 
</div> 
    <div id="footer"> 
     <p class="column-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> 

     <p class="column-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 

     <p class="column-center" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 

    </div> 

Answer 1

宣言height、私は#contentそれが仕事のために高さを宣言することで、そうであっても、large resolution作業コードの上に見つけることができませんでした。

body{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#content { 
 
     background-image: url('http://placehold.it/1600x1600'); 
 
     background-size: cover; 
 
     width: 100%; 
 
     height: 100vh; 
 
     background-position: center; 
 
     margin-bottom: 180px; 
 
     z-index: 1; 
 
     background-repeat: no-repeat; 
 
    } 
 

 
    #footer { 
 
     position:fixed; 
 
     bottom:0; 
 
     left:0; 
 
     width:100%; 
 
     height:200px; 
 
     z-index:-1; 
 
     background-color:#000; 
 
     color: #fff; 
 
    } 
 

 
.column-left{ float: left; width: 33%; } 
 
.column-right{ float: right; width: 33%; } 
 
.column-center{ display: inline-block; width: 33%; } 
 
.column-left, .column-right, .column-center 
 
{ 
 
    margin-top: 30px; 
 
} 
 
@media screen and (max-width:640px){ 
 
    #content{ 
 
     height: 100vh; 
 
    } 
 
}

<div id="content"> 
 
<div id="footer"> 
 
    <p class="column-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> 
 

 
    <p class="column-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 

 
    <p class="column-center" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 

 
</div> 
 
</div>