3

我的 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% 并且不想使用溢出=隐藏。

我应该在上面使用哪些 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"

请帮忙

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

4

3 回答 3

5

试试这个 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; }
于 2012-06-09T19:30:08.773 回答
4

另一种解决方案是使用padding-topinstedmargin-top

于 2014-02-18T08:59:56.377 回答
0

由于您的边距将您的 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}
于 2012-06-09T19:37:26.423 回答