绝对定位使页脚消失

时间:2016-09-25 08:00:20

标签: html css

早上好,

下面的代码是我的一个页面的简化模板,只是为了让您了解它的设置方式。我试图让我的页脚粘在容器的底部。我在容器中尝试了相对位置,并在页脚中定位绝对底部0px,但页脚消失了。

我用谷歌搜索了但是我似乎能找到的唯一答案是告诉我要做我上面已经尝试过的事情。

有没有人知道出了什么问题?

由于

<html>
<body>
<div id="container" style="width:1000px; height:1000px;  margin-top:0px; border-left:1px solid black; border-right:1px solid black; position:relative;">

<div>
some content here
</div>


<div id="footer" style="height:15px; background-color:red; position:absolute; bottom:0px; ">
</div>


</div><!-- container end -->
</body>
</html>

1 个答案:

答案 0 :(得分:1)

您的代码中没有错误,只是您没有css width添加到#footer,即使您没有添加宽度,您仍然需要一些内容在它然后它会工作。目前,您的#footer div是空的。

&#13;
&#13;
<div id="container" style="width:1000px; height:1000px;  margin-top:0px; position:relative; background:red">

    <div style="background:yellow">
    some content here
    </div>


    <div id="footer" style="width:100%; height:15px; background:pink; position:absolute; bottom:0px; ">
    </div>


</div>
&#13;
&#13;
&#13;