Question

出于好奇，考虑下面的例子，为什么#container div上的边距导致垂直滚动条出现在浏览器中？容器的高度远小于身高，设定为100％。

除了#container之外，我已将所有元素的填充和边距设置为0。请注意，我故意在#container div上省略了绝对定位。在这种情况下，浏览器如何计算身体的高度以及边际如何影响它？

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { padding:0; margin:0;}
html, body { height:100%; }
#container
{
  padding:10px;
  margin:50px;
  border:1px solid black;
  width: 200px;
  height: 100px;
}
</style>
</head>
<body>
  <div id='container'>
  </div>
</body>
</html>

JSFiddle

上的示例

Answer 1

If you paint the backgrounds of html and body (giving each its own color)，您很快就会注意到body与#container一起向下移动，而#container本身并未从{{1}的顶部偏移完全没有。这是margin collapse的副作用，我详细介绍here（尽管该答案描述的设置略有不同）。

这种行为会导致滚动条出现，因为您已声明body的高度为body的100％。请注意，html的实际高度不受影响，因为边距永远不会包含在高度计算中。

Answer 2

有点晚了，但也许对某人有帮助。

将float: left;添加到#container会删除滚动条，正如W3C所说：

•浮动框和任何其他框之间的边距不会折叠（甚至在浮动及其流入子项之间也不会崩溃）。

Answer 3

基于@ BoltClock♦的答案，我通过将边距归零来修复它...
所以

html,body, #st-full-pg {
   height: 100%;
   margin: 0;
}

适用于将id“st-full-pg”分配给面板div（其中还包含面板标题和面板主体）

Answer 4

将overflow: hidden;添加到html和正文。

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

Answer 5

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

这对我有用

Answer 6

添加OpenEntityManagerInViewInterceptor很不错，但会使用float:left;

干扰中心水平定位

如果您知道保证金有多大，您可以使用calc：

计算您的身高百分比

margin:auto;

浏览器支持很好，但只有IE11 + https://caniuse.com/#feat=calc

Answer 7

我找到了一个解决方案：添加填充：1px 0; to body防止出现垂直滚动条

Answer 8

在@BoltClock的启发下，我尝试了此操作，即使放大和缩小也能奏效。

Browser: Chrome 51

html{
  height: 100%;
}
body{
  height: 100%;
  margin: 0px;
  position: relative;
  top: -20px;
}

我猜body下移了20px。

Answer 9

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

如果要删除正文滚动，请添加以下样式：

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

Answer 10

我在将body的所有内容放入名为wrap的div中之前看到了这个问题。 Wrap的样式应设置为position: relative; min-height: 100%;。要从顶部和左侧放置#container div 50px，请将div内部包裹，并将填充设置为50px。边距不适用于换行和我们刚刚制作的div，但它们可以在#container及其中的所有内容中工作。

here's my fix on jsfiddle

Answer 11

/*removes default margin & padding*/
html, body{
    padding: 0px !important;
    margin: 0px !important;
}

/*sets body height to max; and allows scrollbar as page content grows*/
body{
    min-height: 100vh;
}

Answer 12

对于那些来这里以获得更容易理解的答案（甚至包括代码示例）的人，此答案（从here复制）适合您。

否需要JavaScript或确定的像素值（例如100px），只需纯CSS和百分比即可。

如果您的div只是自己坐在那里，height: 50%表示身体高度的50％。通常，身体的高度为零，没有任何可见的内容，因此其中的50％恰好是零。

这是解决方案（基于this）（取消注释background行以获得填充的可视化效果）

/* Makes <html> take up the full page without requiring content to stretch it to that height. */

html
{
  height: 100%;
  
  /* background: green; */
}

body
{
  /*
    100% the height of <html> minus 1 multiple of the total extra height from the padding of <html>.
    This prevents an unnecessary vertical scrollbar from appearing.
  */
  height: calc(100% - 1em);
  
  /* background: blue; */
}

/* In most cases it's better to use stylesheets instead of inline-CSS. */
div
{
  width: 50%;
  height: 50%;
  
  background: red;
}

<div></div>

上面写的是为了仍然有通常的填充。您可以将红色div的尺寸设置为100%，但仍然在每侧/每端看到填充。如果您不希望使用此填充，请使用它（尽管看起来不太好，我建议您坚持使用第一个示例）：

/* Makes <html> take up the full page without requiring content to stretch it to that height. */

html, body
{
  height: 100%;
}

/* You can uncomment it but you wouldn't be able to see it anyway. */

/*
html
{
  background: green;
}
*/

body
{
  margin: 0;
  
 /* background: blue; */
}

/* In most cases it's better to use stylesheets instead of inline-CSS */
div
{
  width: 50%;
  height: 50%;
  
  background: red;
}

<div></div>

Answer 13

它对我有用：

html,
body {
    height: 100%;
    height: -webkit-fill-available; // Chrome
}

// Firefox
@-moz-document url-prefix() {
    body {
        box-sizing: border-box; 
        margin: 0;
        padding: 1px;
    }
}

Answer 14

您可以在 body 标签中添加不间断空格。

<body> &nbsp; <othertags>...</body>

Answer 15

我想分享一种替代方法，我们可以使用填充而不是边距-这样页面就会看起来一样。

默认的框模型为“内容框”，其中不包括填充和边距，因此总高度超过视口高度的100％。

因此，我们可以选择“边框”框模型，该模型在高度计算中包括填充。

body {
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
    height: 100vh;
}

CSS does the width include the padding?

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Answer 16

我找到了一个快速解决方案：尝试将高度设置为99.99％而不是100％

车身高度100％显示垂直滚动条

16 个答案: