在页面底部划分

时间:2013-03-26 14:18:52

标签: css html footer

在我的网站上,我希望网站底部的页脚。我将此添加到页脚css:

position: fixed;
bottom: 0;
width: 100%;

页脚现在位于底部,但所有内容都在页脚div上。像页脚div是背景。如何将页脚放在右下角?

6 个答案:

答案 0 :(得分:1)

你似乎在问两个不同的问题。尝试提高页脚元素的z-index以使其高于其他内容。

要将其置于右下角,请将宽度和右侧位置设置为零。

答案 1 :(得分:0)

我不确定我是否理解您的问题,但您可以尝试在页脚css中添加/更改此问题

right: 0;
width: 50%;
z-index: 999;

答案 2 :(得分:0)

您需要使用CSS z-index属性并将主要内容容器padding-bottom等于页脚的高度,以防止您的页脚切断页面底部。

答案 3 :(得分:0)

看一下这篇文章“如何在页面底部保留页脚”:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

答案 4 :(得分:0)

您需要通过将页脚的高度添加到内容区域的边距底部来补偿页脚的高度。首先,在每个页面上查找显示在页脚之前的元素。希望它会是这样的:

<div id="header">
    HEADER CONTENT
</div>
<div id="content" style="margin-bottom: 50px;">
    YOUR SITES CONTENT
</div>
<div id="footer" style="position: fixed; bottom: 0; width: 100%; height: 50px;>
    FOOTER CONTENT
</div>

另外,不要像我上面那样使用内联样式。请使用propper css :)它可以帮助所有的互联网。

答案 5 :(得分:0)

位置:fixed将元素从页面流中取出。结果是,当涉及影响您的其他元素时,您的页脚占据“无”。 你的内容最终排在首位的原因是它实际上并不知道它的存在。我的意思是,在考虑其他元素时,您需要考虑您的页脚。 例如,如果你有一个在你的页脚之前结束的包装器,你可以给它一个额外的底部填充,相当于你的页脚的高度。

回答问题的某个隐藏的第二部分:为了能够为元素提供z-index,它需要使用“static”(默认定位)之外的其他位置。如果你试图在两个不同的元素上计算z-index,你需要给它们一个除“静态”以外的位置值来获得完全控制。

希望其中一些有帮助, 异