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上方使用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; }

Answer 2

另一种解决方案正在使用padding-top而不是margin-top

Answer 3

由于你的差距正在向上推动你的div而不是增加总高度。在css2中，你可以做的伎俩是将容器div包装在另一个div中并向左或向右浮动。因为浮动元素一般不会推送其父元素。然后给它100％的宽度。然后清除它。最终的代码看起来像......

标记

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

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

3 个答案: