Question

我有一个类似http://codepen.io/meek/pen/NNprYb的网页我的问题是页脚不是停留在页面底部，而是位于第一部分的底部。

页脚HTML：

<footer class="row-footer">
    <div class="container">
        <div class="row">             
            text
        </div>
    </div>
</footer>

和CSS：

footer {
    width: 100%;
    bottom: 0;
    position: absolute;
    height: 50px;
  background-color: #ccc;
}

无论我尝试什么，我都无法让它留在最底层。我希望它能够在联系部分的最后。

澄清：我不希望它被修复，我只是希望它位于页面的最底部。

Answer 1

从#content

中删除position:absolute

从footer

中删除

struct airport{
    char *name;
    int capacity;
} all_airports[MAX+AIRPORTS];
int nextAirport;

struct airport *newAirport(char *name, int capacity)
{
    all_airports[nextAirport].name= malloc(strlen(name)+1);
    strcpy(all_airports[nextAirport].name, name);
    all_airports[nextAirport].capacity= capacity;
    return(&all_airports[nextAirport++]);
}

将高度设置为100％只会使其与窗口/屏幕高度一样高。删除它将使其“自动扩展”。

Answer 2

Codepen Link

footer {
   width: 100%;
    bottom: 0;
    position: fixed;
    left: 0;
    height: 50px;
    background-color: #ccc;
}

或

只需执行以下操作即可将整个html包装在div中让我们称之为包装器那么

footer{ position: fixed; top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px'); height: 50px; background-color: #ccc; }

这段代码只是计算页脚div的最高值

Answer 3

好的，在页脚上使用position: absolute;通常不是一个好主意，因为页脚不再相对于网站上的其他内容移动。我了解您不想使用position: fixed;，因为这不会为您提供所需的结果。

您的#content div当前具有100%的恒定高度，这会将页脚推到内容中间的某个位置。

我的解决方案是在min-height: 100%; div上使用#content并从页脚中删除position: absolute;（和bottom: 0;）。

结果：内容分组＆＃39;如果添加更多内容，高度将适应超过100%。它始终至少为100%，因此页脚将始终被推到页面底部，即使内容仅填充窗口大小的一半。

为什么我的页脚不在页面底部？

3 个答案: