Html 添加页边距顶部时，将显示垂直/高度滚动条

我的HTML：

div.container

我的CSS：

html, body {
  height: 100%;
  background-color: red;
  padding-left: 0px;
  padding-right: 0px;
}    
.container {
  height: 100%;
  background-color: blue;
  margin-top: 5px;
  *zoom: 1;
}

我想使用height=100%，不想使用overflow=hidden

我应该在上面使用哪些CSS属性，这样我就可以对容器div产生边距顶部的效果，而在容器div上方不会创建垂直滚动条

想象一下：

* Body with color red
* A div container in body and I want to see the margin of "x" px on top bewteen body and conatiner
* Color of div container blue
* No scrollbars and No overflow="hidden"

请帮忙

我怎样才能做到这一点？请帮助

尝试此CSS

*{
    margin:0;
    padding:0;
}
html, body {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    height: 100%;
    background-color: red;
    padding-top:5px;
}    
.container {
    height: 100%;
    background-color: blue;
    *zoom: 1;
}

首先重置所有边距和填充。

框大小：边框框

表示无论添加多少填充，元素的大小都将保持不变

您还可以为红色条使用绝对定位div

HTML

---

因为你的保证金是推动你的div向上，而不是增加总高度。在css2中，您可以做的技巧是将容器div包装在另一个div中，并将其向左或向右浮动。因为浮动元素通常不会推动其父元素。然后给它一个100%的宽度。然后清理它。最后的代码看起来像

加价

<div class="wrap">
 <div class="container">
  &nbsp;
 </div>
</div>
<div class="clear"></div>

---

另一种解决方案是使用

填充顶部

代替

页边顶部

thx，以便您快速响应。让我试试。然而现在，下面的解决方案对我有效。我会理解的，谢谢。事实上，第一个答案很好，已经解决了你的问题。但该答案包含一些旧浏览器不支持的css3规则。这就是为什么我再次写道，在我的案例中，如何仅使用css2解决此问题。您的解决方案对我有效。我会更了解CSS和你的解释。堆叠和堆叠岩石的人！！！事实上，我太快了，没法宣布成功。我仍然得到滚动条。可能是我做错了什么。我会检查我是否能用上面的代码做我想做的事情。我的意思是把边框尺寸和主体元素中的填充放在一起。但是，如果我开始使用边距而不是填充，那么我会再次获得滚动条。可能是我缺乏对css的理解。因此，我无法将其标记为正确与否。但这绝对是一次投票。红色部分有什么变化吗？如果不是，你可以使用边界。我将编辑答案红色部分中没有任何内容

.red-bar{ position:absolute; width:100%; height:5px; top:0; background:red; }
.content{ height:100%; background:blue; }

<div class="wrap">
 <div class="container">
  &nbsp;
 </div>
</div>
<div class="clear"></div>

html, body {
  height: 100%;
  background-color: red;
  padding-left: 0px;
  padding-right: 0px;
  margin:0;
}    
.container {
  height: 50%;
  background-color: blue;
  margin-top: 5px;
  *zoom: 1;
}
.wrap{height:auto;float:left;width:100%;}
.clear{clear:both}