代码之家 › 专栏 › 技术社区 › Jason Christa

将页脚粘贴到页面底部,而不进行无关标记

html5 css html

3

Jason Christa · 技术社区 · 14 年前

如果你只需要担心火狐和Webkit浏览器,你会用什么CSS来让下面HTML中的页脚粘在页面的底部? 注: 我不想在页面中添加任何标记。

<html>
    <body>
        <header>...</header>
        <article>...</article>
        <aside>...</aside>
        <footer>...</footer>
    </body>
</html>

3 回复 | 直到 12 年前

1

6

djdd87 14 年前

只需将位置设置为固定,并将底部设置为0:

footer
{
   position:fixed;
   bottom:0;
}

在FF、IE7、IE8等网站为我提供服务。这是我在某个站点上的实际CSS,用于页脚(带有ID的DIV footer ):

#footer
{
 clear:both;
 color:#FFF;
 background:#666;
 bottom:0;
 border:solid 1px #333;
 height:30px;
 width:100%;
 min-width:950px;
 position:fixed;
 z-index:100;
}

2

1

Jimmy 14 年前

试用使用 position:fixed

你可以这样做:

footer { position:fixed; bottom:0; }

这是值得注意的,因为你正在使用 <footer> 标记,您不应该将放在CSS的“footer”前面,因为使用footer引用的是ID为“footer”的元素,而不是footer元素本身。

3

0

Lloyd Powell binku 12 年前

div#footer { position:fixed; bottom:0; } 是去的路吗