我尝试在 Bootstrap 中为我的页面应用程序创建页脚。我做到了，现在我的页脚在页面上看起来很棒。但是，当页面的全局内容越来越多并且所有信息不适合浏览器时，我如何隐藏页脚？
当我要在中央 block 显示更多信息时，我必须隐藏页面底部的页脚。现在页脚地下室位于浏览器窗口的底部。
最佳答案
当前代码的问题是#wrapper没有position:relative。因此#footer 绝对定位于视口(viewport)。
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>关于twitter-bootstrap - 在 Bootstrap 中将页脚推离屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32268604/