Question

我有一个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);
}

Answer 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无论如何（即使它是绝对的）。

Answer 2

solution demo

问题：

您的div为position编辑....所以您必须以适当的格式应用position而不是margin ...使用left，{{1而不是right等

margin-left

纠正css

padding:10px;
margin:20px auto;

修改

#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
设置了body填充
如果删除了上面的填充 there will be no horizontal scroll too `

Answer 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)
}

添加保证金时，CSS Body更高

3 个答案: