Question

我在这里有一个实时网站： my website

问题是页脚导航栏没有一直定位在浏览器的底部，如下所示： enter image description here

有一点蓝色间距，这不是我想要实现的。

我正在使用twitter bootstrap，如果这有帮助，但是页脚栏div对象被称为“navbar navbar-default”

如果我将脚注div命名为：

<div class="navbar navbar-default navbar-fixed">

然后，导航栏粘在浏览器窗口的最底部，但它保持固定，这不是我想要的。

目前，代码是这样的：

<div class="navbar navbar-default navbar-fixed">

我如何实现目标？

由于

编辑：我向大家道歉，我的网站有页脚固定，但如果代码没有固定页脚栏，它将有间距。我为这种困惑道歉。

Answer 1

试试这个

你可以试试这个

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/
}

这是一个HTML

以下是HTML代码的基本结构。您会注意到页脚如何位于包裹之外。

<div id="wrap">

    <div id="main">

    </div>

</div>

<div id="footer">

</div>

您可以将内容元素放在主内容中。例如，如果您使用的是2列浮动布局，则可以使用此选项;

<div id="wrap">

    <div id="main">

        <div id="content">

        </div>

        <div id="side">

        </div>

    </div>

</div>

<div id="footer">

</div>

标题可以放在包装内，但可以放在主页上方;

<div id="wrap">

    <div id="header">

    </div>

    <div id="main">

    </div>

</div>

<div id="footer">

</div>

Answer 2

这是我能够获得标题/正文/页脚的最简单方法。 Demo

HTML

<div class="wrap">
    <div class="header">
    </div>
    <div class="body">
    </div>
</div>
<div class="footer">
</div>

CSS

html, body {
    height: 100%;
    margin: 0;
}
.header {
    height: 100px;
    background-color: red;
}
.wrap {
    height: 100%;
    background-color: green;
    margin-bottom: -100px;          /* Must be negative height of footer */
}
.footer {
    height: 100px;
    background-color: blue;
}

Answer 3

我不熟悉Twitter Bootstrap，但间距很可能是由body标记和/或footer标记及其内部所有内容之间的填充或边距引起的。在chrome的代码检查器中，我在<div class="navbar...">中看到了20px的计算边际底部，在<body>中也计算了60px。

快速测试是修改<div class="navbar">：

<footer>
    <div class="navbar navbar-default" style="margin: 0;">

查看是否有任何变化。如果不是：

<body style="margin: 0;">

在Chrome的代码检查程序中进行了测试，并且页脚放置在底部没有任何间距（并且没有“粘住”），但它是一个黑客，所以你应该找到一个更好的方法/遵循bootstrap的逻辑。

如何将页脚栏放在网站的最底部？

3 个答案: