添加边距时 CSS Body 更高答案

【问题标题】：CSS Body is higher when margin added添加边距时 CSS Body 更高
【发布时间】：2014-02-07 21:01:03
【问题描述】：

我有一个 DIV #page，如果我在顶部添加边距，会突然出现滚动条，即使元素不大于正文。我怎样才能让滚动条消失？

（见Fiddle）

我的 HTML

<html>
<body>
<div id="page">
    I am a div sized with calc()!
</div>

</body>
</html>

我的 CSS

html, body {
height:100%;
}
body {
margin:0;
padding:0 10px 0 10px;
font-family:helvetica;
background:black;
color:yellow;
}
#page {
position:relative;
min-height:90%;
min-height:calc(100% - 60px);
width:100px;
padding:10px;
margin:20px auto;
background-color:rgba(255,255,255,.2);
}

【问题讨论】：

似乎元素实际上“比正文大”...但是 - overflow-y: hidden on body 会删除滚动条，如果你想要的话？

标签： css height margin

【解决方案1】：

问题：body 默认为position:static。为直接子级添加边距将导致它按比例移动，而与它的高度无关。

解决方案：将position:fixed 提供给body，以防止移动和移除滚动条。

演示：http://jsfiddle.net/abhitalks/mZKC5/18/

CSS：

html, body {
    height: 100%; width: 100%;
}
body {
    position: fixed; /* important to keep it fixed */
    margin: 0; padding: 0px 10px;
    font-family: helvetica;
    background: black; color: yellow;
}
#page {
    height: calc(100% - 60px); /* 10+10 padding + 20+20 margin = 60px is ok */
    width: 100px;
    padding: 10px;
    margin: 20px auto;
    background-color: rgba(255, 255, 255, .2);
}

编辑：（根据@AWolff 的建议）

上面的演示显示的是当向直接子级应用边距时正文滚动的原因。但是，制作 body fixed 的副作用是，即使您想添加更多相关内容，它也将不再可滚动。

如果您需要像素完美，更好的解决方案是使用绝对定位来放置元素。

或者，按照@NoobEditors 的建议使用相对的positioning 而不是margins，因为它无论如何都是相对于body 的（即使它是绝对的）。

【讨论】：

等一下，然后正文不再可滚动？！
@A.Wolff：是的。这就是 Op 所问的：“我怎样才能让滚动条消失？”
@abhitalks 那么为什么不直接使用溢出：隐藏；或将DIV设置为绝对？
@A.Wolff：完全同意你的看法。 Op想知道为什么身体卷轴，所以想让他看到。但是，是的，我会将其添加到答案中。
检查它我在开发工具中看到的比 BODY 似乎从顶部（html？）占用 20px 的边距。我无法解释：（

【解决方案2】：

solution demo

问题：

您的 div 是 positioned....所以您必须以正确的格式应用 positioning 而不是 margin...使用 left,right 而不是 margin-leftetc

padding:10px;
margin:20px auto;

正确的 css

#page {
    position:relative;
    min-height:90%;
    min-height:calc(100% - 60px);
    width:100px;
    padding:10px;
    margin:0 auto; /*center the div*/
    top:20px; /*proper assigned margin to kill v-scrollbar*/
    bottom:20px;/*proper assigned margin to kill v-scrollbar*/
    background-color:rgba(255, 255, 255, .2);
}

编辑

Horizontal scroll would be there 因为您在padding:0px 10px 0px 10px; 处设置了body 填充

如果上面的填充被移除了 there will be no horizontal scroll too`

【讨论】：

Op 的计算似乎是正确的，他想要 div 的上边距。
这就是我有 calc(100%-60px) 的原因，这意味着它总共是 100%
@downvoter：在以闪电般的速度投票之前，请指出问题并给发帖者一些时间来改进答案。
@abhitalks ：是的，他正在补偿与calc 的差异......但是......好吧，让我添加一个解释编辑:)
@JSHelp : simple thumb rule =>margin 用于不使用position....如果使用position 属性，使用top,bottom等:)

【解决方案3】：

编辑更改了统一边距的答案，这需要更多的工作，需要一个额外的包装器 div 来设置适当的 CSS 样式fiddle -

HTML

<body>
    <div class = "dummy">
        <div id="page">
            I am a div sized with calc()!
        </div>
    </div>
</body>

新的 CSS -

html, body {
    height:100%;
}
body {
    margin:0;
    padding:0;
    font-family:helvetica;
    background:black;
    color:yellow;
    display: table;
    position: absolute;
    width:100%;
}
.dummy{
    height:100%;
    display: table-cell;
    vertical-align: middle;
    text-align:center;
    padding 0 10px 0 10px;
}
#page {
    position:relative;
    text-align:left;
    min-height:90%;
    min-height:calc(100% - 60px);
    width:100px;
    padding:10px;
    margin:20px auto;
    background-color:rgba(255,255,255,.2)
}

【讨论】：

这不是一个解决方案。仔细看那个小提琴。 Op 希望在顶部和底部有统一的边距，但底部似乎有更多空间。
好吧，我误会了会修改答案
有了这个css和标记......你几乎改变了除了文本和calc()之外的所有东西！ :)