Question

很多时候，网页的HTML结构是这样的：

<div id="full">
    <div id="header"></div>
    <div id="body"></div>
    <div id="footer"></div>
</div>

我的情况有点不同：

<div id="full">
    <div id="header"></div>
    <div id="body"></div>
</div>
<footer id="footer"></footer><!-- I assume it doesn't matter whether it's a footer or a div  -->

CSS：

html, body {
    height: 100%;
}
body {
    position: relative;
    min-height: 100%;
    direction: rtl;
}
#full {
    position: relative;
    min-height: 100%;
    height: 100%;
    padding-top: 2%;
    display: flex;
    flex-direction: column;
}
#header {
    position: relative;
    padding-bottom: 2%;
}
#body {
    width: 100%;
    flex-grow: 1;
    background-color: #F6F6F6;
}
#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 14px;
}

除了结构本身，我认为值得一提的是：

#header的内容已预先知道，#body的内容未知。
#body填写#header之后的剩余内容（我使用了flex方法）。

我发现了很多例子，但每个例子都在主容器中有#footer。

我的问题是：

如何修复#footer，以便它保持在最底层？

Answer 1

我不知道是否有我想要的解决方案，但我通过改变结构来解决它。

正如我在问题中提到的那样，我的#body填充了#header之后的剩余空间，并且所有内容都必须在它之上（至少在视觉上），包括页脚。< / p>

我更改了我的结构，以便#footer位于#body内，在其末尾。

这听起来不是正确的解决方案，但它对我有用而不会引起任何其他问题。

将页脚对接到主要部分的底部

1 个答案: