在Bootstrap中将页脚推离屏幕

时间：2015-08-28 10:14:24

标签： twitter-bootstrap footer

我尝试在Bootstrap中为我的页面应用程序创建页脚。我做到了，现在我的页脚在页面上看起来很棒。但是当页面的全局内容更多而且所有信息都不适合浏览器时，我怎么能隐藏页脚？

enter image description here

当我在中央区块中显示更多信息时，我必须在页面底部隐藏页脚。现在页脚底部位于浏览器窗口的底部。

1 个答案:

答案 0 :(得分：1)

您当前代码的问题是#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>

相关问题
最新问题