Question

正如你可以通过标题告诉我想要一个页脚粘在底部。我知道有很多话题。我已经读完了它们。但我无法让它工作，因为我的导航，固定在顶部。

布局如下：

<header class="navbar navbar-fixed">
</header>
<div class="content">
  <div class="container">
  </div>
  <div class="clearfooter"></div>
</div>
<footer>
</footer>

这是CSS：

html, body {
  height: 100%;
}

body {
  padding-top: 40px; /* height of the navbar */
}

.navbar-fixed {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1030;
}

.content {
  margin-bottom: -30px;
  min-height: 100%;
  position: relative;
}

.clearfooter {
  clear: both;
  height: 30px;
}

#footer {
  height: 30px;
  position: relative;
}

我试过这个tutorial。但是页脚没有固定在窗口的底部，而是向下（不再在视口中）。我已经尝试使用额外的填充/边距修复它但没有任何效果：（

Answer 1

不是在主体上添加填充以推送页面，而是创建一个push div，以便在固定标题和内容之间添加一些空格，如下所示：

<强> HTML

<div class="push">&nbsp;</div>

<强> CSS

.push { height:40px; }

.push:before, .push:after {
  display: table;
  content: "";
  zoom: 1;
}

.push:after {
  clear: both;
}

这是一个演示：

http://jsfiddle.net/andresilich/fVpp2/1/show/

在这里编辑http://jsfiddle.net/andresilich/fVpp2/1/

注意：添加了一串断行来说明页脚的位置。

（编辑：jsfiddle剪切我的CSS，添加回来。）

Answer 2

我做了一个实验并且有效，这里是html：

<body>
    <div class="wrapper">
        <div class="header">
        </div>
        <div class="contain">
        </div>
        <div class="footer">
        </div>
    </div>
</body>

和css：

.header {
        height: 100px;
        background-color: red;
    }

    .contain {
        height:1500px;
        background-color: black;
    }

    .wrapper {
        width: 960px;
        background-color: yellow;
        margin: 0 auto;
    }
    body {
        margin: 0;
    }

    .footer {
        height: 200px;
        background-color: blue;
    }

它的页眉和页脚都已修复，我希望你能从中获得线索。

将页脚粘贴到页面底部并在顶部进行固定导航

2 个答案: