在Bootstrap中推送頁腳關閉屏幕

我嘗試在Bootstrap中爲我的頁面應用程序創建頁腳。我做了它，現在我的頁腳在頁面上看起來很棒。但是我怎樣才能隱藏頁腳，當頁面的全局內容會更多而且所有的信息都不適合瀏覽器？在Bootstrap中推送頁腳關閉屏幕

當我將顯示在中央塊的詳細信息，我必須在頁面底部隱藏頁腳。現在在瀏覽器窗口底部的頁腳地下室。

2015-08-28 Paweł Groński

提供更多信息。 –

當我將在中央區塊顯示更多信息時，我必須隱藏頁面底部的頁腳。現在在瀏覽器窗口底部的頁腳地下室。 –

你可以創建一個你的問題的演示嗎？我猜你正在使用'position：fixed' –

您當前的代碼存在的問題是，#wrapper沒有position: relative。所以#footer被絕對定位到視口。

html, 
 
body { 
 
    height: 100%; 
 
} 
 
#wrapper { 
 
    min-height: 100%; 
 
    position: relative; 
 
} 
 
#header { 
 
    background: #ededed; 
 
    padding: 10px; 
 
} 
 
#content { 
 
    padding-bottom: 100px; 
 
    /* Height of the footer element */ 
 
} 
 
#footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    height: 100px; 
 
    background: #ededed; 
 
    width: 100%; 
 
}

<body> 
 

 
    <div id="wrapper"> 
 

 
    <div id="header"> 
 
     Header 
 
    </div> 
 
    <!-- #header --> 
 

 
    <div id="content"> 
 
     Global information (When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom 
 
     of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows) Pull the line between CSS and Result Global information (When information 
 
     more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, 
 
     footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows) Pull the line between CSS and Result Global information (When information more, footer dont hidden. Footer 
 
     stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay 
 
     in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows) Pull the line between CSS and Result Global information (When information more, footer dont hidden. Footer stay in the bottom of windows)(When 
 
     information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows)(When information 
 
     more, footer dont hidden. Footer stay in the bottom of windows) Pull the line between CSS and Result Global information (When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. 
 
     Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer 
 
     stay in the bottom of windows) Pull the line between CSS and Result Global information (When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows)(When 
 
     information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows) Pull the 
 
     line between CSS and Result Global information (When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont 
 
     hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows) Pull the line between CSS and Result 
 
    </div> 
 
    <!-- #content --> 
 

 
    <div id="footer"> 
 
     Footer 
 
    </div> 
 
    <!-- #footer --> 
 

 
    </div> 
 
    <!-- #wrapper --> 
 

 
</body> 
 

 
</html>

來源

2015-08-28 12:30:20

謝謝。是工作。 –

很高興它的工作，帕維爾！ :) –

在Bootstrap中推送頁腳關閉屏幕

回答

相關問題