Question

根据官方文档中的this示例，我注意到将在＆lt; 2000px的高度，我将在页脚下面有很多空白区域。

我无法根据this示例指定页脚的高度（它可能会动态增加），所以我想我不能将它粘贴到页脚？

如何解决这个问题？

Answer 1

在您评论中链接到的示例中，页脚实际上粘贴到页面底部的内容不是页脚高度，而是以下CSS规则：

.footer {
  position: absolute;
  bottom: 0;
}

如果您通过浏览器的开发者工具查看页脚并禁用height CSS规则，则可以自行查看，页脚将继续位于页面底部。

就身体边缘而言，由于你的页脚没有固定的高度，你可以设置它的唯一方法是使用Javascript来测量页脚并在document.ready上设置身体边距。参见附带的例子：

＆＃13;

$(document).ready(function(){
  var footerHeight = $('.footer').height();
  $('body').css('margin-bottom', footerHeight);
});

＆＃13;

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
  padding: 60px 15px 0;
}
.container .text-muted {
  margin: 20px 0;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

code {
  font-size: 80%;
}

＆＃13;

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>

<!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <!-- Begin page content -->
    <div class="container">
      <div class="page-header">
        <h1>Sticky footer with fixed navbar</h1>
      </div>
      <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body &gt; .container</code>.</p>
      <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    </div>

    <footer class="footer">
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer>

＆＃13;

Answer 2

使用Boostrap的粘性页脚，对于页脚的高度，使用此jquery，它检查页脚的高度并将其添加到html标记。它在页面加载和Window.resize事件上运行，因此它适用于响应式项目。

$(document).ready(function(){
    $(window).resize(function(){
        $("html").css("padding-bottom",$(".footer").outerHeight())
    }),
        $("html").css("padding-bottom",$(".footer").outerHeight()
    );
});

Bootstrap 3 CSS - 固定导航栏会在短页面上产生大量空白区域

2 个答案: