デスクトップではブートストラップフッターが正しく表示されますが、モバイル上ではコンテンツの上に移動します

ブートストラップを使用してウェブサイトを作成していますが、フッターに問題があります。デスクトップではブートストラップフッターが正しく表示されますが、モバイル上ではコンテンツの上に移動します

フッターはコンテンツの下に置く必要があります。スティッキーではありません。スクロールする必要があります。デスクトップ上ではうまくいきますが、モバイルデバイス（または狭いビューポート）ではメインコンテンツの上に表示されます。

基本的なHTML構造

<body> 
    <nav></nav> 
    <main> 
    <row> 
     <div></div> 
     <div></div> 
    </row> 
    <row> 
     <div class="container-fluid col-sm-6"></div> 
     <div class="container-fluid col-sm-6"></div> 
    </row> 
    </main> 
    <row></row> 
    <footer></footer> 
</body>

関連するCSS

main { 
    height:97%; 
    position: relative; 
    font-family: 'Advent Pro', sans-serif; 
} 

footer { 
    background-color: #5fc3eb; 
    color: #ffffff; 
    padding: 2em; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    clear: both; 
    height: 5em; 
    position: relative; 
}

あなたはamiec.com.auで面倒サイトの周りを掘ることができます。

出典

2017-08-09 Jax