Question

我正在尝试为自己的艺术作品单独创建一个网站，然后我遇到http://ryanfait.com/sticky-footer/。我在为它添加额外元素时遇到了麻烦。

我有以下HTML结构：

<html>
<head>
    <link rel="stylesheet" href="style.css" ... />
    <link rel="stylesheet" href="layout.css" ... />
</head>
<body>
    <div class="wrapper">
        <p>Your website content here.</p>
        <div class="push"></div>
    </div>
    <div class="footer">
        <p>Copyright (c) 2008</p>
    <img src="image.png>    
    </div>
</body>

以下style.css：

.wrapper {
position: relative;
width: 800px;
margin: 0 auto -50px;
}

.footer {
position: relative;
width: 100%;
margin: 0 auto;
padding: 0;
background-color:#000000;
text-align:center;
}

.footer img {
position: relative;
width: 400px;
top: -238px;
margin: 0 auto;
} 

.footer a {
color: #fff;
text-decoration: underline;
border: 0;
}

.footer p {
position: absolute;
left: 0;
bottom: 4px;
width: 100%;
padding: 0;
color: #fff;
font: 0.8em arial,sans-serif;
}

使用layout.css：

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's        height */}
.footer { height: 50px; /* .push must be the same height as .footer */} 

.push {
height: -100px; /* .push must be the same height as .footer */
}

我将图像设置为负片，以便在调整窗口大小时它与主要内容重叠。另外，我想在图像正下方有一个粘性的“边框”。然而，无论我多少把边缘或高度搞得一团糟，我都无法摆脱上面代码所造成的负面空间。你有什么建议吗？

**我明白了。粘性页脚教程使粘性页脚停在主体的边界。我想要的是一个粘性页脚，它是一个顶层“层”，将覆盖主体并在底部有一个边框元素。我不应该使用'top：-238px'。相反，我在html和css中嵌套了一个脚下的类。

<div class="footer">        
    <img src="Image.png" width="400" height="238" />
    <div class="bottom-border">
        <p>Copyright (c) 2008</p>
    </div>
</div>

和

.footer img {
position: relative;
width: 400px;
margin: 0 auto;} 

.bottom {
position: relative;
width: 100%;
height: 20px;
margin: 0 auto 0;
padding: 0;
text-align:center;
background-color: #000000;}

然后，根据'layout.css'评论中的粘性页脚说明，我保持.wrapper，.footer，.push高度都是一样的。**

Answer 1

迟到但我无论如何都可以回答:)问题正在发生，即使你的图像相对放置在页脚上方，它仍占据页面中的相同位置。您想使用position:absolute;。

Here it is working

我做了以下更改：

.footer img { 
  position:absolute; 
}

.footer p {
  position: relative;
  height:4em;
}

使用position:absolute;会将元素放在最后一个非静态（默认）元素的位置，并将其从“页面流”中删除。所以在这种情况下，它将它放在.footer并将其从页面中取出，这样它就不再占用任何空间了。

编辑：我也通过将其更改为绝对来打破居中，因为margin:0 auto;对position:absolute;元素不起作用。添加这些规则来解决这个问题。

.footer img {
  left:50%;
  margin-left:-200px;
}

Answer 2

我有最简单的粘性页脚解决方案。请简单添加高度：100％的身体和HTML。然后包装显示：表格。对于添加元素，您可以在.w1元素中添加任何内容/元素。

它的页脚也很灵活。

这是代码

html{height:100%;}
body{
    margin:0;
    height:100%;
  background: #ccc;
}
#wrapper{
    width:100%;
    height:100%;
    display:table;
    margin:0 auto;
}
#footer{
    width:100%;
    overflow:hidden; /*for FF on Windows 7*/
    display:table-footer-group;
    height:1%;
  background: #333;
  color: #fff;
}

<div id="wrapper"> <!-- table -->
    <div class="w1">
        <p>header and content of the page</p>
    </div>
    <div id="footer"> <!-- table-footer-group -->
            <p>footer content</p>
    </div>
</div>

带有额外元素的CSS粘性页脚

2 个答案: