無法獲取頁腳佔用屏幕的其餘部分

我使用的引導程序未經任何修改。佈局非常簡單。我有一個頂級的導航欄。然後是主容器。最後，我有一個頁腳。類似於：無法獲取頁腳佔用屏幕的其餘部分

<head> 
<style> 
     body { 
     padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ 
    background-color: #ECECEC; 
     } 
</style> 
</head> 

<body> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
    // navbar elements 
    </div> <!-- end of class navbar --> 

    <div class="container"> 
    // fluid-row class with two column structure 
    </div> <!-- end of class container --> 

    <div class="footer"> 
     <div class="container"> <!-- using container to left-align footer to the main content --> 
     // some content 
    </div> <!-- end of class footer --> 
</body>

有兩件事情是無法做到的。

1）每當主容器類中的內容較少時，我需要將頁腳對齊到屏幕底部。我試過最小高度：100％，但我做錯了什麼。

2）我需要頁腳有不同的背景顏色，一旦主容器結束，頁腳應該佔據屏幕的其餘部分。頁腳可以具有最小高度，或根據頁腳內的內容獲取高度。

.footer { 
height:80px; 
margin-top:-80px; 
position:relative; 
clear:both; 
padding-top:20px; 
background-color:#F4F4F4; 
border-top:1px solid #ddd; 
clear:both; 
}

這是怎麼回事？

的jsfiddle：http://jsfiddle.net/m7dkt/13/

來源

2013-01-10 Destiny In Ur Hands

我用這一招：我希望這將是對你有用。

HTML

<div id="wrap"> 
    <div id="clearfooter"></div> 
</div> 
<div id="footer"> 
</div>

CSS

#clearfooter { 
    display: block; 
    height: 50px; 
} 

#wrap{ 
    padding-bottom:69px; 
    overflow:hidden; 
} 

#footer{ 
    width:100%; 
    height:69px; 
    background:#8dc63f; 
    overflow:hidden; 
    clear:both; 
    color:#FFF; 
    position:fixed; 
    bottom:0; 
    opacity:0.9; 
}

來源

2013-01-10 06:17:07 user1964909

謝謝！但是這會產生粘性的頁腳。如果主容器的內容較少，我希望頁尾顯示結束。否則，頁腳應顯示在容器下方的正常位置。那可能嗎？ –

嘗試增加以下你的CSS的CSS：

html, body, #wrapper{ 
    height:100%; 
}

來源

2013-01-10 06:28:56 dunli

這應該爲你做的伎倆：http://jsfiddle.net/panchroma/ru2BD/

相反Ø f試圖弄清楚如何爲頁腳着色並將其延伸到頁面的底部，設置頁腳顏色所需的主體顏色，然後在頁眉和頁腳之間着色內容區域。

body { 
background-color: #F4F4F4; /*same as footer color */ 
} 

/* don't need to explicitly set footer colour now, it's set above */ 

/* .footer { 
background-color:#F4F4F4; 
} */ 

/* wrap page content and set the background colour */ 

#wrapper{  
padding-top:10px; 
background-color:#ECECEC; 
}

更新

如果我理解你正確地你也想頁腳文本對齊到窗口的底部。看看這看起來如何：
http://jsfiddle.net/panchroma/D7YXP/

這是上述技術與粘腳的組合。

來源

2013-01-10 14:38:23

謝謝，但如果容器的內容較少，這並不能解決頁腳一直進入屏幕底部的問題1。如果容器的內容多於屏幕的高度，則頁腳應該在內容在底部完成後才顯示。如何使它工作？ –

請參閱上面的更新以強制頁腳文本到窗口的底部 –

無法獲取頁腳佔用屏幕的其餘部分

回答

相關問題