html，正文100％导致滚动条出现

Question

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

HTML：

Content-Disposition: attachment; filename=xxxx.xls

的CSS：

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

右侧显示滚动条。因为我正在使用的粘性页脚，我必须有html，身体100％。有什么想法吗？

Answer 1

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

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 { {3}} position属性接受static（每个元素的默认值），absolute，relative或fixed。这不是问题，而是浏览器忽略的东西，因为它不理解它。

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

Answer 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？

Answer 3

如果您检查元素，则可以通过后退 margin-top样式看到它。

解决方案

而不是margin-top，请使用top。

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

Answer 4

还有另外一种想法，即使其中一些答案有效。将正文设置为0 float和div left到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; } 。

Example - Code Pen

pointer = pointer->getNext()

Answer 5

您应该使用overflow。

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

Answer 6

尝试使用：

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