Bootstrap頁腳在桌面上正確放置，但在移動內容上移動

我使用bootstrap創建網站，但頁腳出現問題。Bootstrap頁腳在桌面上正確放置，但在移動內容上移動

頁腳應該位於內容下方。不粘 - 它應該滾動到。在桌面上它很好，但是在移動設備上（或狹窄的視口），它會超出主要內容。

基本的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