1

我在页面的最底部有一个 115 像素的图像。我在网上搜索了如何让它一直停留在页面底部，得到了很多复杂的答案。我用我自己的代码制作（至少在我的浏览器中）。我意识到这可能是一种不成熟的方式，并想看看它是否有任何潜在的问题。这是我的代码

<div id="footer" style="position:fixed;top:100%;margin-top:-115px;left:0%;repeat:repeat-x;background:url(http://EXAMPLE.com/images/bottom-border.png);height:115px;width:100%;">
&nbsp;
</div>
4

2 回答 2

1

这是您始终在页面底部执行页脚的方法。您可以替换footer为<div id="footer">...</div>，但我更喜欢 HTML5 footer。

在此处输入图像描述

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        body { height: 100%;}
        footer {background: url(http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=5); 
                position: fixed; bottom: 0; left: 0; height:115px;width:100%; }
    </style>
</head>
<body>
    <footer>

    </footer>
</body>
</html>
于 2013-02-19T15:30:24.703 回答
0

您可能需要考虑如果正文与视口高度一样长会发生什么。文本可能位于固定页脚后面，您可能看不到它

我会推荐；

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

然后确保让包含所有内容的 div 具有与页脚高度相同的填充底部。

#main { padding-bottom: 150px; }  /* must be same height as the footer */
于 2013-02-19T15:15:25.620 回答