Question

我正在努力获得一个自适应变量高度粘性页脚。我正在使用Twitter Bootstrap以及以下页面模板。我添加了CSS以获得粘性页脚。就页面的高度而言，我得到了期望的结果。但是，尽管使用了类container-fluid，页面的宽度仍然减少了。我也尝试将相同的类添加到页眉/页脚。当我在Firebug计算样式中检查它时，我无法看到任何body，header，footer，#wrapper的Width设置。

CSS：

html, body {
  height: 100%; 
}

body {
  display: table;
}
header, #wrapper, footer{
  display: table-row;
}
#wrapper{
  height: 100%;
}
footer {
  min-height: 50px;
}

HTML：

<body>
<header class="navbar navbar-inverse">
    <div class="container-fluid"></div>
</header>
<div id="wrapper" class="container-fluid">
</div>
<footer class="navbar navbar-inverse">
    <div class="container-fluid"></div>
</footer>

Answer 1

试试这个，设置.navbar margin-bottom:0。这会根据wrapper的高度或这些navbar之间的内容来调整页脚。

＆＃13;

#wrapper{
  height:500px;
}
.navbar{
  margin-bottom:0 !important;
}

＆＃13;

<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
  <nav class ="navbar navbar-inverse">
    <div class ="container-fluid"></div>
  </nav>
</header>

<div id="wrapper">
  <div class="container-fluid"></div>
</div>

<footer>
 <nav class ="navbar navbar-inverse">
    <div class ="container-fluid"></div>
  </nav>
</footer>

＆＃13;

Sticky Footer with Bootstrap - 宽度问题

1 个答案: