html - 如何使用CSS 3和html5制作响应式固定 header

Question

我正在尝试制作一个简单且响应迅速的布局。我能够使#container和#content响应，但是固定的#header保留在原处，并且在调整浏览器窗口大小时会溢出。无论如何，在特定的长度上有一个居中的，固定的，可响应的标题吗？如果通过将浏览器窗口向左推来调整其大小，您将看到我在说什么。我觉得解决方案很简单，只需要CSS？

这是示例网页Sample Site

另外，还有一个问题：如果我要在标题中添加图片，是否可以使用相同的（潜在）解决方案？

Answer 1

我发现它与css一起工作的唯一方法是为标题提供适当的left和right属性。

#header {
position: fixed;
top: 0;
text-align:center;
background-color: grey;
right:10%;
left:10%;
}

这可能不完全是您想要的，但可能会有所帮助。

这是 jsfiddle的链接