html - 为什么宽度为 : 100% is not assuming the full window width size?

标签 html css width dimension

我有下面的 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%

您可以在这张图片中看到:enter image description here

如何解决?

非常感谢。

最佳答案

嘿,你的标题没有问题。 问题出在你的

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

关于html - 为什么宽度为 : 100% is not assuming the full window width size?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27854440/

相关文章:

javascript - 创建新的 HTML 表单而不重置先前的输入

javascript - 当一个元素进入另一个元素时如何使用 jQuery 获得回调?

javascript - 检测用户将要访问我网站内或外部的哪个页面

javascript - 在 JS 中获取 HTML 输入字段中的书面文本

html - 悬停状态下的 CSS 边框

jquery - 超出其 DIV 指定宽度的文本

javascript - jquery/javascript 如何更快地计算宽度

jquery - 根据用户屏幕尺寸设置div宽度

css - 当我使用 CSS3 缩放 iframe 内容时,我几乎得到了正确的结果

html - React 响应式和动态视频网格