html,正文100%导致滚动条出现

http://codepen.io/basickarl/pen/Wrwdam?editors=110

HTML:

CSS:

html,
body {
    height: 100%;
}

div.back {
    margin-top: 50px;
    display: absolute;
    width: 30px;
    height: 30px;
    background-image: url('http://simpleicon.com/wp-content/uploads/arrow-35.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

右侧的滚动条显示.因为我正在使用的粘性页脚,我必须有html,身体100%.有任何想法吗？

该body元素margin: 8px;在大多数主流浏览器中都有默认值,因此首先必须通过重置元素margin上的属性来删除它body

body {
    margin: 0;
}

然后,不要height: 100%;在身体上使用,min-height: 100%;以便当与身体一起使用时身体也可以长到超过100%的高度overflow: hidden;

因为min-height如果父高度没有明确设置不起作用,一个height属性已被添加到html元素为好.

html {
    height: 100%;
}

body {
    margin: 0;
    min-height: 100%;
    overflow: hidden;
}

此外,您的div.back选择器在display属性上具有无效值.该display属性接受inline,inline-block,block,none,flex,inline-flex,grid 等...而position属性接受static(默认为每一个元素)absolute,relative或fixed.这不是问题,而是浏览器忽略的东西,因为它不理解它.

div.back {
    display: absolute; // <------ remove this line
    //... snipped ...
}