Html 为什么宽度：100%不采用全窗宽尺寸？

我有下面的HTML代码和CSS：

正文{
背景色：#C7C7C7；
}
#内容{
背景色：#FFF；
文本对齐：居中；
}
.翘曲{
填充：15px；
显示：内联块；
宽度：700px；
背景色：红色；
}
#标题{
宽度：100%；
背景色：#000；
颜色：#FFF；
}

标题在这里
内容在这里

这是因为当您调整浏览器大小时，有一个固定的宽度div，即

。将
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不会超出您想要的700px


下面是演示：


正文{
背景色：#C7C7C7；
}
#内容{
背景色：#FFF；
文本对齐：居中；
}
.翘曲{
填充：15px；
显示：内联块；
宽度：700px；
最大宽度：100%；
框大小：边框框；
背景色：红色；
}
#标题{
宽度：100%；
背景色：#000；
颜色：#FFF；
}

标题在这里
内容在这里
嘿，标题没有问题。
问题在于你的生活

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

.warp{
填充：15px；
显示：内联块；
宽度：700px；因为
.warp{}
你给了这个div
宽度：700px
修正。所以你可以使用媒体屏幕，给
.warp{}
div
宽度：100%
或者给
.warp{/code>div宽度的百分比（%）.
你能定义你需要什么吗？我不明白你的问题。我想要页眉宽度：100%，但它不起作用。你可以在图片中看到。div#Warp>div#headery你的意思是在全尺寸下它不会达到100%？是的，我想要页眉宽度是浏览器窗口的全尺寸。你做出响应了吗？我添加了最大宽度：100%，但它仍然不起作用？