Question

我觉得这很简单，所以我只是粘贴代码。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        .c1 {
            background: yellow;
            width: 800px;
        }

        .c2 {
            background: blue;
            margin: 50px;
        }
    </style>
</head>
<body>

<div class="c1">
    <div class="c2">  
        1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
    </div>
</div>

</body>
</html>

问题是，为什么页面顶部或底部没有黄色条带？我认为它应该在c1的受控空间中，但背景颜色是不可见的。

Answer 1

由于利润率下降。将overflow:auto添加到您的c1规则中：

 .c1 {
     background: yellow;
     width: 800px;
     overflow:auto;
 }

<强> jsFiddle example

Answer 2

这是保证金崩溃问题。在此实例中为c1添加填充以获得所需的效果。我已回答了有关保证金崩溃的更复杂问题，但这并不需要采取这些措施。

CSS：边距上的不可见背景

2 个答案: