首页 > 背景颜色填充屏幕宽度问题

背景颜色填充屏幕宽度问题

一个h1标题,设置了width:100%,缩放出现滚动条时,出现空白区域

代码如下:
css:

h1{
width:100%;
height:50px;
line-height:50px;
background-color:blue;
}

div{
  width:1000px;
  height:200px;
  border:1px solid red
}

html:

<h1>欢迎来到………………</h1>

<div></div>

如上的代码,在放大网页的时候,会出现h1标签背景颜色没有占满屏幕宽度。

怎么解决??


被你的问题搞糊涂了,如果你margin:0设置好的前提下。请问你是用手机做的测试吗?放大页面,意思是缩小窗口吗?
首先,这个100%是根据他的父元素也就是body计算的,时间是在你的窗口第一次加载或者改变窗口大小的时候,所以如果你缩小窗口(也就是你说的放大页面)的大小使得宽度小于1000px,那么body的宽度随着他的父元素小于1000px,那么h1的宽度自然也就小于1000px,出现滚动条,整个页面的宽度是最大的宽度撑起来的(你这里是div),这个时候你拉动滚动条当然会有空白~~~~
解决方法@jasonintju已经告诉你了,1.7k的前辈的建议还是要仔细看看的,作为同样的初学者我把他们看作最伟大的资源。
如果你不想直接设置h1的min-width,那就设置一下body的min-width吧,让他足够大(最宽的元素的宽度)这样body的子元素就都不会出现这个问题了。


h1的width:100%;是相对于其父元素body的宽度计算的,而body的width默认是当前窗口的宽度(html和body的margin,padding为0时)。所以,缩小窗口时,body的width减小,h1的width也就相应减小了。滚动条的产生是由于div的宽度较大造成的,此时的div已经突破了body的宽度范围。你可以加个body{border: 1px solid blue;}看一下实际的情况。


*{
    padding:0;
    margin:0;
}
【热门文章】
【热门文章】