添加margin-top时会出现垂直/高度滚动条

Question

我的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之上使用EFFECT of margin-top,而不会创建垂直滚动条.

想象一下:

* 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"

请帮忙

我怎么能做到这一点？请帮忙

Answer 1

试试这个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;
}

首先重置所有边距和填充.
box-sizing:border-box;表示无论添加多少填充,元素的大小都将保持不变.

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

HTML

<div class="red-bar"></div>
<div class="content"></div>  

CSS

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