HTML-身高不是100％

Question

body {
   height: 100%;
   background-color: #f8f8f8 ;
   background-image: url('images/bottom-right.png'); /*Images*/
   background-position: right bottom; /*Positioning*/
   background-repeat: no-repeat; /*Prevent showing multiple background images*/
}

所以我有这段代码将图像放在主体的右下角，但是问题是它的位置不符合我想要的方式。 它在右侧，但不在底部。 它仅与div中的内容一样高，就像div或其他任何内容一样。 你能帮我实现我想要的吗？

这是图片-> http://tinypic.com/view.php?pic=2iabd3p&s=8谢谢

Answer 1

您还需要在html上设置高度，并删除正文的边距：

body {
    height: 100%;
    background-color: #f8f8f8;
    background-image: url('http://www.placehold.it/100x100');
    background-position: right bottom;
    background-repeat: no-repeat;
    margin:0;
    padding:0;
}
html {
    height:100%;
}

jsFiddle示例

Answer 2

简单设定height: 100%; 在所有情况下都无法正常工作。 虽然我通常不太喜欢使用CSS2 position但这可能会在这种情况下为您提供帮助...

body, html
{
 bottom: 0px;
 left: 0px;
 overflow: auto;
 position: absolute;
 right: 0px;
 top: 0px;
}