添加边距时CSS正文更高_Css_Height_Margin

添加边距时CSS正文更高

css

添加边距时CSS正文更高,css,height,margin,Css,Height,Margin,我有一个DIV#页面，如果我在页面顶部添加一个边距，就会突然出现一个滚动条，即使元素不大于主体。我怎样才能把滚动条弄走（见附件）我的HTML <html> <body> <div id="page"> I am a div sized with calc()! </div> </body> </html> 问题：您的div是positioned…。因此您必须以正确的格式应用positioning而不是ma

我有一个DIV#页面，如果我在页面顶部添加一个边距，就会突然出现一个滚动条，即使元素不大于主体。我怎样才能把滚动条弄走

（见附件）

我的HTML

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

</body>
</html>

问题：

您的div是

position

ed…。因此您必须以正确的格式应用

position

ing而不是

margin

。使用

left

，

right

而不是

margin left

等

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

编辑

水平滚动将在那里

，因为您已将

正文

填充设置为

填充：0px 10px 0px 10px
如果删除了上述填充`
编辑更改了统一页边空白的答案，这需要更多的工作，需要额外的包装div来设置适当的CSS样式-
HTML
问题：主体
默认为位置：静态
。向直接子对象添加边距将导致其在不考虑其高度的情况下按比例移动
解决方案：提供位置：固定到主体
，以防止移动和移除滚动条
演示：
CSS:
编辑：（根据@AWolff的建议）
上面的演示显示的是当边距应用于直接子级时正文滚动的原因。但是，使正文
固定
的一个副作用是，即使您希望添加更多的相对内容，它也将不再是可滚动的
更好的解决方案是使用绝对定位来放置元素，如果你需要完美的像素
或者，按照@noobeditor的建议使用相对定位
，而不是边距
，因为它无论如何都是相对于主体
（即使它是绝对的）
.
看起来元素实际上“比身体大”。。。然而-overflow-y:hidden on body将删除滚动条，如果您需要的话？Op的计算似乎是正确的，他希望div上有一个上边距。这就是我有计算（100%-60px）的原因这意味着它是100%的total@downvoter：请指出问题并给海报一些时间来改进答案，然后再以闪电般的速度向下投票。@abhitalks:是的，他正在补偿计算的差异
…但是…好的，让我添加一个解释编辑：）@JSHelp:simple thumb rule=>边距
如果不使用位置
…如果使用位置
属性，请使用顶部
，底部
等：）这不是解决方案。仔细看那把小提琴。Op希望在顶部和底部有统一的边距，但底部似乎有更多的空间。好吧，我误解了will会用这个css和标记修改答案…u实际上改变了除了文本和calc（）！！：）等等，但身体就不能滚动了@沃尔夫：是的。这就是Op所问的：“我怎样才能把滚动条拿走？”@abhitalks那么为什么不直接使用overflow:hidden；或者将DIV设置为绝对值？@A.Wolff：完全同意。Op想知道为什么身体会滚动，所以想让他看到。但是，是的，我将把它添加到答案中。我在开发工具中看到，检查它时，BODY似乎从顶部（html？）获取了20px的边距。我无法解释：(
#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);
}

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

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

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