html, body 100% 导致滚动条出现答案

【问题标题】：html, body 100% causing scrollbar to appearhtml, body 100% 导致滚动条出现
【发布时间】：2016-03-25 06:28:41
【问题描述】：

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;
}

右侧的滚动条显示。由于我正在使用粘性页脚，我必须拥有 100% 的 html 正文。有什么想法吗？

【问题讨论】：

使用body { overflow:hidden; }
html, 身体 { 高度: 100%;溢出：隐藏； }
因为你加了margin-top: 50px，试试padding-top: 50px
将 margin:0;padding:0 添加到 html 和 body 样式中。此外，CSS 中有一个错误 display:absolute is not a valid property/value （可能是 display:block 或 position:absolute 但不是 display:absolute）
@TamilSelvanC 当内容足够长以至于实际需要滚动条时会发生什么？

标签： html css

【解决方案1】：

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

body {
    margin: 0;
}

然后，不要在身体上使用height: 100%;，而是使用min-height: 100%;，这样当与overflow: hidden;结合使用时，身体也可以增长超过100%的高度

由于如果没有明确设置父高度，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 etc... 而position 属性接受 @98654344@元素）、absolute、relative 或 fixed。这不是问题，而是浏览器不理解而忽略的问题。

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

【讨论】：

"body 元素有一个默认边距：8px;"严格来说，这并不正确。这完全取决于您使用的浏览器。
@ChuckLeButt 确实如此，但如果你想让你的网站在所有浏览器中看起来都一样，不幸的是，无论如何你都必须添加它，相应地更新答案

【解决方案2】：

部分原因是默认浏览器样式表添加了一些margins 和/或padding。将它们重置为 0 将修复部分问题 (JSFiddle)。

但是，您也有一个 div 应用了一些边距 (50px)。盒子模型的工作方式意味着您需要从 100% 中减去它。如果你真的需要，你可以使用calc（或者直接改成padding）：

height: calc(100% - 50px);

使用上述代码的示例：http://codepen.io/anon/pen/mVPpYK

使用填充的示例：http://codepen.io/anon/pen/OMNzqB?

【讨论】：

【解决方案3】：

如果你检查元素，你可以看到它，因为 back margin-top 样式。

解决方案

使用top，而不是margin-top。

然后将margin: 0添加到您的 HTML/BODY。

【讨论】：

你是对的，但你没有包括完整的解释——div.back 上的margin-top 仅影响body 标签，因为margin collapse 可以使用@ 修复body 元素上的 987654331@ 或 overflow: hidden 以便它包含边距

【解决方案4】：

还有另一种想法，尽管其中一些答案有效。将主体设置为具有margin 的0 和float 的div 到left。

Example - Code Pen

html, body { height: 100%; margin: 0; }

div.back { 
    float: left; 
    margin-top: 50px; 
    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;
}

【讨论】：

【解决方案5】：

您应该使用overflow。

body {
  height: 100%;
  overflow:hidden;
}

【讨论】：

【解决方案6】：

尝试使用：

html, body {
    height: 100%; overflow: hidden;
}

【讨论】：