在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中推送页脚关闭屏幕

回答

相关问题