Question

目前在粘性页脚和具有渐变背景的主体方面存在一些问题。我的包装器中的内容溢出到页脚。

感谢所有帮助：

CSS

html {
    height:100%;
}

body {
    background: linear-gradient(to bottom, #000000 0%,#ffffff 100%); 
    background-attachment:fixed;
    color:red;
    height:100%;
}

#wrapper {
    min-height:100%;
}

footer {
    background:#CCC;
    margin-top:-50px;
    width:100%;height:50px;
}

和http://jsfiddle.net/ZqkY7/14/

Answer 1

您可以使用以下命令指定高于页面的z-index：

z-index: 1000;

你甚至可以使用固定的方式来定位它：

.footer {
    position: fixed;
    bottom: 0;
    margin: 0 auto;
    background-color: black;
    color: white;
    width: 100%;
    height: 50px;
    z-index: 1000;  
}

的Bam！粘性页脚。

http://jsfiddle.net/ZqkY7/15/

Answer 2

最好给你的包装器一些填充来说明页脚

#wrapper {
  min-height:100%;
  padding-bottom: 60px;
}

Answer 3

你可以像@Teknikitsune建议的那样使用粘性页脚，我认为这就是你所追求的。为了解决页脚下显示的内容，您只需要在封面板中添加比页脚更大的边距：

#wrapper {
    min-height:100%;
    margin-bottom:55px; <!-- added to stop text disappearing under footer -->
}

footer {
    position: fixed;   <!-- for sticky footer -->
    bottom: 0px;       <!-- for sticky footer -->
    background:#CCC;
    width:100%;height:50px;
}

我还从margin-top:-50px;课程中删除了footer，但这并不是必需的。

Sample JS Fiddle

Answer 4

这里的解决方案，希望对其他人有用。

html {
    height:100%;
}

body {
    background: linear-gradient(to bottom, #000000 0%,#ffffff 100%); 
    background-attachment:fixed;
    color:red;
    height:100%;
}

#wrapper {
    height:100%;height:auto !important;min-height:100%;
}

.wrapper {
    margin:0 auto;
    width:1024px;
}

footer, .push {
    height:50px;
}

footer {
    background:#CCC;
    margin-top:-50px;
    min-width:1024px;
}

内容：

http://jsfiddle.net/ZqkY7/19/

没有内容：

http://jsfiddle.net/ZqkY7/21/

粘滞页脚与渐变背景

4 个答案:

Sample JS Fiddle