假设您有一个网站，并且有一个漂亮的粉红色标题，它在您的整个屏幕上水平延伸。在标题内有一些文本需要居中并具有 960 像素的固定宽度区域。
---------------------------
| x | hello | x |
| |
| y | hi | y |
---------------------------
x = 粉红色背景行 y = 黄色背景行
是否有人有一个最新的 css（无 js）解决方案来消除对容器 div 的需要，只是经常用于填充？
html:
<header>
<div>
hello
</div>
</header>
<footer>
<div>
hi
</div>
</footer>
CSS：
header {
background: pink;
}
header > div {
width: 960px;
margin:0 auto;
}
有人有解决方案吗，也许前后有伪？所以你可以写漂亮的html：
<header>hello</header>
<footer>hi</footer>
并在css中修复它。
这是一个基本的例子，重点是；我经常必须使用 div 来进行布局，主要是填充。当然，我可以设置单独的背景来解决问题，但我说的是把这一切放在一起，因为可能有相同的问题和另一个背景。与主要内容相同，依此类推。
希望有类似的东西：
header{
background: pink;
padding: 100%-960px;
}
这将“成功”并在调整视口大小后进行缩放。