我已经为一个div设置了背景颜色，但当我缩小窗口尺寸时，它消失了。

Question

网页链接是site link。如果您缩小窗口大小，透明灰色背景会消失。我已经尝试了许多方法来解决这个问题，但没有成功。有什么想法吗？ 我使用的CSS是：

  #content {
    margin-bottom: 20px;
    padding-left: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.6);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
    overflow:auto;
}

- Ernest Berkhout

Answer 1

你好，现在在你的#content id中定义为float:left;

就像这样

   #content{
    float:left;
    }

--------------

或者定义

#content{
display:block;
}

- Rohit Azad Malik

Answer 2

有一个CSS规则，只有当宽度小于980像素时才会应用float:left。这导致背景消失。

@media screen and (max-width: 980px) .grid, .grid-right {
    float:none;
}

当窗口大于980像素时，#content的计算样式为：

float:left;
display:block;
width: <not auto but some real px value>;

由以下规则组成

.grid {
    float: left;
    margin-bottom: 2.127659574468%;
    padding-top: 0;
}
.col-860 {
    display: inline;
    margin-right: 2.127659574468%;
}

float:left 覆盖了 display:inline，因此 #content 成为块级元素（参见 css display property when a float is applied），背景色将被应用。

然而，当窗口小于980px时，#content 具有计算样式

float:none;
display:inline;
width:auto;

因此，#content 是 display:inline，背景不会显示 - 参见为什么我的背景颜色不显示，如果我有 display:inline？ 删除 @media screen and (max-width: 980px) .grid, .grid-right 规则将解决问题，但我假设这是响应式网站的一部分，可以缩放和适应多个分辨率和窗口大小。建议检查在较低分辨率下需要什么行为。无论如何，在窗口小于980px的情况下，给#content一个display:block或float:left将解决问题。

- andyb

Answer 3

它可以工作

.grid{
  position: absolute;
  left: 0;
  /* ... */
}

太。 （删除了float:left）

- Andrea Ligios

Answer 4

你可以给整个区块或某个部分添加 display:table 样式。例如，我有一个包含 3 篇文章的 div，我给这个 div 添加了 clearfix 类，并为其设置了 display:table 样式。代码如下：

<div class="clearfix">
<article></article>
<article></article>
<article></article>
</div>
.clearfix::after, .clearfix::before{ 
content: "";
clear: both;
display: table;
}

- Marzye Fatehi