html，正文100％导致滚动条出现 [英] html, body 100% causing scrollbar to appear

问题描述

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

html:

<div class="back">
</div>

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％.有什么想法吗?

The scrollbar on the right displays. I have to have html, body at 100% because of a sticky footer I'm using. Any ideas?

推荐答案

body 元素在大多数主流浏览器中具有默认的 margin:8px; 通过在 body 元素

the body element has a default margin: 8px; in most major browsers so first you have to remove that by resetting the margin property on the body element

body {
    margin: 0;
}

然后，不要在身体上使用 min-height:100％; 来在身体上使用 min-height:100％; ，这样身体也可以增长到100以上高度％与溢出一起使用:隐藏；

Then, instead of using height: 100%; on the body use min-height: 100%; so that the body can also grow beyond 100% height when used in conjunction with overflow: hidden;

由于如果未显式设置父高度，则 min-height 不起作用，因此必须将 height 属性添加到 html 元素.

Since min-height doesn't work if the parent height isn't explicitly set, a height attribute has to be added to the html element as well.

html {
    height: 100%;
}

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

此外，您的 div.back 选择器在 display 属性上具有无效的值. display 属性接受 inline ， inline-block ， block ， none ， flex ， inline-flex ， grid

Also, your div.back selector has an invalid value on the display property. the display property accepts inline, inline-block, block, none, flex, inline-flex, grid etc... whereas the position property accepts static (default for every element), absolute, relative or fixed. This is not a problem but rather something the browser just ignores as it doesn't understand it.

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

这篇关于html，正文100％导致滚动条出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！