Question

我对CSS很新，所以请原谅我天真的错误。

目标：尝试制作简单且响应迅速的布局。我可以使 #container 和 #content 响应，但修复后的 #header 保持原位并在调整浏览器窗口大小时溢出。如果您通过向左推动浏览器窗口来调整其大小，您将看到我在说什么。

另外，附带问题：如果我要在标题中添加图像，是否会应用相同的（潜在）解决方案？如果您对这种布局感到好奇，我正在尝试编辑我的＆＃34; Tumblr＆＃34;布局，我想让它响应（它是我试验的私人tumblr博客，我不是试图让它在手机/平板电脑上做出响应 - 但是。）

以下是 JSFIDDLE： http://jsfiddle.net/yrbvw473/2/

    HTML
<div id="container">
    <div id="header">This Is The Header</div>
    <div id="content">
        <div class="post">A</div>
        <div class="post">A</div>
        <div class="post">A</div>
    </div>
</div>


    CSS
    #container {
    border: 0px solid;
    max-width: 640px;
    padding-left: 50px;
    padding-right: 50px;
    margin: auto;
    display: block;
    overflow-x: hidden;
}
    #header {
    margin-top: 0px;
    margin-bottom: 0px;
    position: fixed;
    background-color: grey;
    width: 640px;
    z-index: 1;
    text-align: center;
    display: block;
}
    #content {
    width: 100%;
    overflow-x: hidden;
    clear: both;
    border: 1px solid;
    margin-top: 50px;
}
    .post {
    margin-bottom: 45px;
    width: 100%;
    border: 1px solid;
    margin-top: 50px;
    text-align: center;
}

感谢您的帮助！同样，我也是新人......

Answer 1

在#header上评论或删除此position: fixed;。并将宽度更改为max-width: 563px;

Answer 2

因为你把标题宽度的值，这就是为什么标题不能灵活跟随浏览器宽度。请改用width:100% SEE FIDDLE

使用CSS的响应式固定标头

2 个答案: