在固定div下的頁腳

我目前很難讓頁面的頁腳正常工作。我認爲這是因爲我的固定位置的標題和容器div，但我需要將它們固定，以便在滾動時保持最佳狀態。我不知道如何考慮這個問題，當容器div空了時，頁腳出現在底部。在固定div下的頁腳

HTML： -

<body> 
     <div id="wrapper"> 
     <div id="header"> 
      <div id="headerContent"> 
      </div> 
     </div> 
     <script> 
      $(document).ready(function() { 
        $('#container').css('marginTop', $('#header').outerHeight(true) + $('#navbar').outerHeight(true)); 
      }); 
     </script> 
       <div id="navbar"> 
        <div id ="navbarContent"> 

       </div> 
     </div> 
     <div id="container"> 
     </div> 
     <div id="footer"> 
     <div id="footerContent"> 
     </div> 
     </div> 
</div> 
    </body> 
</html>

CSS： -

#container{ 
    width:960px; 
    margin:auto; 
    overflow:hidden; 
} 

#wrapper{ 
    min-height:100%; 
    position:relative; 
} 


#navbar{ 
    width:100%; 
    height:40px; 
    margin:auto; 
    background-color:#4e8885; 
    position:fixed; 
    top:120px; 
    padding:0px; 
} 

#header{ 
    width:100%; 
    height:120px; 
    margin:auto; 
    background-color:#8bbcba; 
    position:fixed; 
    top:0px; 
} 

#footer{ 
    width:100%; 
    min-height:20px; 
    margin:auto; 
    background-color:#8bbcba; 
    position:absolute; 
    bottom:0; 
    left:0; 
}

來源

2013-04-01 user1060187

你有沒有在線工作的示例頁面？ –

你的意思是你想讓頁腳在屏幕底部像工具欄一樣保持固定，或者你的意思是你想讓它拉低到低於任何內容？ –

@PeterFeatherstone不，我只希望頁腳與頁面底部一致，所以如果容器沒有內容，例如 – user1060187

在您的例子使用固定的高度，這是沒有必要動態計算利潤。您應該可以將container的頁邊距分別設置爲與頁眉和頁腳的總數分別匹配margin-top和margin-bottom。看到這個jsFiddle：http://jsfiddle.net/9Jdrr/

如果你需要動態計算它，你應該能夠根據這種安排做到這一點。

來源

2013-04-01 14:50:36 metadept

如果您擺脫了容器中的所有內容，頁腳仍然保持在屏幕底部以下.. – user1060187

@ user1060187這只是因爲我在'container'元素上放了一個'min-height'。如果你想把它縮小到0高度，只需刪除'min-height：300px;'它應該可以正常工作。 – metadept

那麼頁腳就會直接出現在導航欄後面呢？ – user1060187

在固定div下的頁腳

回答

相關問題