Css 如何在移动设备上使背景色响应？

我已经使用引导创建了一个网站，除了div的背景色外，其他响应功能都很好。元素（图像）是堆叠的，但背景色只保留在行中第一个图像的后面。我正在寻找一种在移动设备上扩展背景色的方法

HTML:

---

我尝试了几种选择，但似乎没有人能解决这个问题。有人知道该怎么做吗？

删除div的

height

属性，它就会工作。

删除div的

height

属性，它就会工作。

引导使用媒体查询在不同大小的屏幕上以不同的方式显示内容。如果你说你的CSS可以在桌面上使用，但不能在手机上使用，那可能是因为你没有使用媒体查询

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    /* your mobile css, change this as you please */
    #omos {
        background-color: #f7f7f7;
        height: 80vh;
        clear: both;
        text-align: center;
    }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    /* your desktop css */
    #omos {
        background-color: #f7f7f7;
        height: 80vh;
        clear: both;
        text-align: center;
    }
}

---

Bootstrap使用媒体查询在不同大小的屏幕上显示不同的内容。如果你说你的CSS可以在桌面上使用，但不能在手机上使用，那可能是因为你没有使用媒体查询

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    /* your mobile css, change this as you please */
    #omos {
        background-color: #f7f7f7;
        height: 80vh;
        clear: both;
        text-align: center;
    }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    /* your desktop css */
    #omos {
        background-color: #f7f7f7;
        height: 80vh;
        clear: both;
        text-align: center;
    }
}

---

让我们想想你的样式表是做什么的

高度：80vh

---

这使得我们要做的事情是视口高度的80%，因此，如果切换到12列时，我们的div堆栈超出该值，则无法获得颜色，因为您的颜色不是基于div，而是基于相对于视口的颜色，twitter媒体查询将更改您的子元素并覆盖此环绕div高度，所以，如果你陷入困境，我会看看min height是否有效，或者如果可能的话，一起删除height（不确定你的愿景是什么）

让我们想想你的样式表是怎么做的

高度：80vh

---

这使得我们要做的事情是视口高度的80%，因此，如果切换到12列时，我们的div堆栈超出该值，则无法获得颜色，因为您的颜色不是基于div，而是基于相对于视口的颜色，twitter媒体查询将更改您的子元素并覆盖此环绕div高度，所以如果你被卡住了，我会看看最小高度是否有效，或者如果可能的话，一起删除高度（不确定你的视力是准确的）

将“高度”属性设置为“自动”，它会正常工作

---

height:auto

将height属性设置为auto，它将正常工作

---

height:auto

您应该检查此链接。你应该检查这个链接。Gracias brotherGracias BrotherHias brotherhow这与背景色有关吗@dI think@CodeBlake的野狗很好地解释了它的工作原理。容器的高度设置为80视口高度，并且内容超出了视口高度，因此仅删除它将使颜色扩展到80vh之外。如果溢出物被隐藏起来，那就有意义了。我知道了。非常感谢。这与bg颜色有什么关系@dI think@CodeBlake的野狗很好地解释了它的工作原理。容器的高度设置为80视口高度，并且内容超出了视口高度，因此仅删除它将使颜色扩展到80vh之外。如果溢出物被隐藏起来，那就有意义了。我知道了。谢谢

@media-only-screen和（最小宽度：480px）{}

应该是

@media-only-screen和（最小宽度：576px）{}

，这样，设计将与bootstrap兼容。@Md.HasanMahmud-断点在BS4上发生变化。我直接从BS3的文档中复制了这些。这是一个旧线程。

@media-only-screen和（最小宽度：480px）{}

应该是

@media-only-screen和（最小宽度：576px）{}

这样，设计将与bootstrap兼容。@Md.HasanMahmud-断点在BS4上发生变化。我直接从BS3的文档中复制了这些。这是一根旧线。

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    /* your mobile css, change this as you please */
    #omos {
        background-color: #f7f7f7;
        height: 80vh;
        clear: both;
        text-align: center;
    }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    /* your desktop css */
    #omos {
        background-color: #f7f7f7;
        height: 80vh;
        clear: both;
        text-align: center;
    }
}