首页 文章

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

提问于
浏览 次
56

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

我已经为除#container之外的所有元素将padding和margin设置为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

html css

12 回答

  • 47

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

    它会导致滚动条出现，因为你声明 body 的高度为 html 的100％ . 请注意， body 的实际高度不受影响，因为高度计算中的边距永远不会包含在内 .

    回复于
  • 0

    有点晚了，但也许有人帮忙 .

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

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

    回复于
  • 16

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

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

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

    回复于
  • 9

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

    html, body {
  height: 100%;
  overflow: hidden;
}
    回复于
  • 0

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

    回复于
  • 0
    html, body {
    height: 100%;
    overflow: hidden;
}

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

    body {
    height: 100%;
    overflow: hidden;
}
    回复于
  • -8

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

    here's my fix on jsfiddle .

    回复于
  • 0
    html,body {
   height: 100%;
   margin: 0;
   overflow: hidden;
}

    这对我有用

    回复于
  • 3

    添加 float:left; 很不错，但会使用 margin:auto; 干扰中央水平定位

    如果您知道您的保证金有多大，您可以使用calc计算您的高度百分比：

    height: calc(100% - 50px);

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

    回复于
  • 1

    受到@BoltClock的启发，我试过这个并且它有效，即使在缩小和缩小时也是如此 .

    Browser: Chrome 51

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

    我猜 body 被降低了20px .

    回复于
  • 0

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

    默认的盒子模型是“content-box”，它不包括填充和边距，因此总高度超过视口高度的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

    回复于
  • 0

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

    回复于

相关问题