为什么宽度：100％不假定整个窗口宽度大小？

Question

我下面有HTML代码和CSS：

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;
}

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

但是当我调整浏览器大小时，标题div不是width: 100%

您可以在此图像中看到： “在此处输入图像描述” >>

如何解决？

非常感谢。

我下面有HTML代码和CSS：body {background-color：＃C7C7C7; } #content {background-color：#FFF;文本对齐：居中； } .warp {padding：15px;显示：inline-block;宽度：700像素； ...

Answer 1

这是因为当您调整浏览器大小时，会有一个固定的div宽度，即.wrap div为700px，如果您调整浏览器的大小，则窗口宽度最大为700px，但是100％的宽度将应用于视口宽度。

Answer 2

嘿，您的标题没有问题。问题出在你的

Answer 3

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

为什么宽度：100％不假定整个窗口宽度大小？

问题描述投票：4回答：3

3个回答

最新问题

为什么宽度：100％不假定整个窗口宽度大小？

问题描述 投票：4回答：3

3个回答

最新问题

问题描述投票：4回答：3