Question

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

以下是示例网页Sample Site

另外，附带问题：如果我要在标题中添加图像，是否会应用相同的（潜在）解决方案？

Answer 1

我发现它使用css的唯一方法是给标题提供适当的左右属性。

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

这可能不是您正在寻找的，但可能会有所帮助。

以下是jsfiddle

的链接

Answer 2

这是我最近的响应式修复标头的代码。我希望这会有所帮助。

HTML

  <div id="header">
      <p id="headerp">Ryan Noack</p>
    <table id="table">
         <tr>
          <td id="headertd1"><a href="bio.html">Bio</a></td>
          <td id="headertd2"><a href="Video.html">Videos</a></td>
          <td id="headertd3"><a href="https://www.google.com/calendar/render?mode=day&date=20150205T165337&pli=1#h%7Cmonth-3+23105+23132+23109" >Calendar</a>
          </td>
        </tr>
    </table>
  </div>

CSS

@media only screen and (min-width: 1800px) and (max-width: 2250px) {

body{
    background-image: url(abstract_0014.jpg);
    background-size: cover;
    postition: relative;
    align: center;
    margin: auto;
    height: 100%;
    max-width: 1950px;

}

注意最大宽度为1950px。这将使您的标题不会在较大的屏幕尺寸上过于拉伸。使用主体作为容器，标题将跨越主体的整个宽度。

#header{

    position: relative;
    background-size: 100%;
    border-radius: 20px;
    margin: 0 auto;
    padding-bottom: 1%;
    padding-top: 1%;

}
}

如何使用CSS 3和html5制作响应式固定标题

2 个答案: