Question

我有HTML代码和CSS

＆＃13;

body{
	background-color: #C7C7C7;
}
#content{
	background-color: #FFF;
	text-align: center;
}
.warp{
	padding:15px;
	display: inline-block;
	width: 700px;
	background-color: red;
}
#header{
	width: 100%;
	background-color: #000;
	color: #FFF;
}

＆＃13;

<body>
<div id="header">
	HEADER IS HERE
</div>
<div id="content">
	<div class="warp">
		CONTENT IS HERE
	</div>
</div>
</body>

＆＃13;

但是当我调整浏览器大小时，标题div不是宽度：100％

您可以在此图片中看到： enter image description here

如何解决？

非常感谢你。

Answer 1

嘿，你的标题没有问题。问题存在于你的

中

.warp{
    padding:15px;
    display: inline-block;
    width: 700px;<-- because of fixed width content go outside the body tag
    background-color: red;
}

Answer 2

这是因为当您调整浏览器大小时，固定宽度div即.wrap div为700px，如果您调整浏览器大小，窗口宽度最高为700px，但视图应用了100％宽度 - 端口宽度。

所以，你怎么做的是将最大宽度应用于.wrap div：

.warp{
    padding:15px;
    display: inline-block;
    width: 700px;
    max-width: 100%;
    box-sizing: border-box;/*for padding values*/
    background-color: red;
}

因此，在较小的窗口中.wrap div不会超出100％的视口宽度，你的标题将与之对应，在较大的窗口中，.wrap div赢了＆＃ 39;超出你想要的700px。

这是演示：

＆＃13;

body{
	background-color: #C7C7C7;
}
#content{
	background-color: #FFF;
	text-align: center;
}
.warp{
	padding:15px;
	display: inline-block;
	width: 700px;
    max-width: 100%;
    box-sizing: border-box;
	background-color: red;
}
#header{
	width: 100%;
	background-color: #000;
	color: #FFF;
}

＆＃13;

<body>
<div id="header">
	HEADER IS HERE
</div>
<div id="content">
	<div class="warp">
		CONTENT IS HERE
	</div>
</div>
</body>

＆＃13;

Answer 3

因为.warp{}这个div你给width: 700px修正了。因此，您可以使用媒体屏幕并提供.warp{} div width: 100%。或者按百分比（％）给出.warp{} div宽度。

为什么宽度：100％不工作

3 个答案: