100% 宽度的页眉和页脚答案

【问题标题】：100% width header and footer100% 宽度的页眉和页脚
【发布时间】：2014-01-23 00:50:51
【问题描述】：

我是 CSS 新手，我正在使用 CSS 从头开始设计我的第一个网站（我最近毕业于.

我想创建一个页面，其中页眉和页脚超出正文的宽度，并从页面的左到右完整。我已经启动了代码，但我被卡住了。页眉将有一个徽标和导航（我还没有编写导航代码，但这并不难），页脚将只有一行内容。

我查看了其他问题中的示例，答案都非常复杂，涉及滚动条之类的东西，这比我想要的要多。

任何有关如何执行此操作的建议将不胜感激！对不起，如果这是一个愚蠢的问题。谢谢。

HTML

<body>

<!-- begin wrapper -->
<div id="wrapper">

<!-- begin header -->
  <div id="header">
    <p>Content</p>
  </div>

<!-- begin navigation -->
  <div id="navigation">
    <ol>
    <li>Home</li>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
    <li>Contact</li>
    </ol>
  </div>

<!-- begin content -->
  <div id="content">
    <h1>Heading</h1>
    <p>Content</p>
  </div>

<!-- begin footer -->
  <div id="footer">
    <p>Content</p>
  </div>

</div>

</body>

CSS

@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow);

#header {
    background: #636769;
}

#navigation {
}

body {
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 16pt;
    background: url(../images/texture.png);
}

#wrapper {
    width: 938px;
    margin: 0 auto;
    padding: 20px 20px;
    background: white;
}

#footer {
   background: #636769;
}

【问题讨论】：

标签： html css xhtml

【解决方案1】：

如果您希望#header 和#footer 跨越整个页面，您还必须将它们移出#wrapper。您可能还想指定高度，例如height: 40px.

您希望页眉和页脚在滚动时保持原位吗？如果是这样，请在两者上使用position: fixed;。然后，在#header 上输入top: 0px; left: 0px; right: 0px;；并在#footer 上输入bottom: 0px; left: 0px; right: 0px;。

还有什么你想做的，请告诉我。我很乐意提供帮助。

【讨论】：

看来我基本上必须为我想要的任何部分设置 div，对吗？因此，如果我想在页面的主体部分中包含三列，它们都需要单独的 div 吗？
您必须将#header 和#footer 移出的原因，就像@McArthe 他们所说的继承...案例#header 和#footer) 与100% 宽度等于938px （父宽度的100%）...所以其具有50% 宽度的子代将具有469px 宽度...等。尝试给 100% 高度时非常有用，因为您必须给 body 高度为 100%。

【解决方案2】：

由于您的#wrapper 类包含整个页面，因此所有后续标签都将继承相同的值。如果您希望#header 或#footer 忽略这一点，那么您需要为这些类指定不同的值。尝试更改这些类以指定它们自己的宽度值（即width: 938px;），看看会发生什么。

【讨论】：

谢谢！我将
移动到页眉之后、内容之前和页脚之前。

【解决方案3】：

将header 和footer div 拉到wrapper 之外，以使它们适合页面的宽度。

<body>

<!-- begin header -->
  <div id="header">
    <p>Content</p>
  </div>

<!-- begin wrapper -->
<div id="wrapper">

<!-- begin navigation -->
  <div id="navigation">
    <ol>
    <li>Home</li>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
    <li>Contact</li>
    </ol>
  </div>

<!-- begin content -->
  <div id="content">
    <h1>Heading</h1>
    <p>Content</p>
  </div>

</div>

<!-- begin footer -->
  <div id="footer">
    <p>Content</p>
  </div>

</body>

【讨论】：

谢谢！这是我没有想到的。