开发者社区> 问答> 正文

缩小浏览器窗口宽度后嵌套div丢失背景色

a123456678 2016-05-27 11:11:41 941

html和css如下:

<div class="outside">
    <div class="inside"></div>
</div>
.outside{
  width:100%;
  height:50px;
  background-color:blue;
}
.inside{
  width:980px;
  height:100%;
  margin:0 auto;
}

内部的div不设置背景色,这样把浏览器窗口拉窄直到出现横向滚动条,
然后把横向滚动条向右拉,超出视口的部分丢失了背景色:
screenshot
screenshot

前端开发
分享到
取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:17:26

    在外层div上面设置min-width: 980px;即可解决

    出现问题中的错误,原因应该是这样的:
    外层div的宽度是100%,就是视口的大小,当视口被拉窄到小于内层div的宽度980px时,比如800px,此时
    外层div宽度为800px,内层div宽度依然为980px,而css中只设置了外层div有背景色,所以说只有800px那一部分会显示背景色,而超出视口的部分是属于内层div的,内层没有设置背景色,所以是空白!

    0 0

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程