Question

我是CSS的新手，我正在使用CSS从头开始设计我的第一个网站（我最近毕业于为了上帝的爱而停止使用html来设计你的网站生活方式）

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

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

任何关于如何做到这一点的建议将不胜感激！对不起，如果这是一个愚蠢的问题。感谢。

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;
}

Answer 1

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

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

您想做的其他事情，请告诉我。我很乐意帮忙。

Answer 2

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

Answer 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>

100％宽度的页眉和页脚

3 个答案: