100％宽的页眉和页脚

我是新来的CSS和我从头开始使用CSS设计我的第一个网站（我最近毕业于上帝之爱的停止使用html来设计你的网站生活方式）。100％宽的页眉和页脚

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

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

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

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

来源

2012-05-30 stephenie

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

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

你想做的任何事情，让我知道。我很乐意提供帮助。

来源

2012-05-30 03:20:17 woz

工作 - 谢谢！ – stephenie

看来，我必须基本上为我想要的任何部分设置div，对吗？所以如果我想在页面的主体部分有三列，那么这些都需要是单独的div？ – stephenie

是的，的确如此。 – woz

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

来源

2012-05-30 03:23:18 McArthey

谢谢！我将

移动到标题之后，内容之前和页脚之前。 – stephenie

太棒了！很高兴它对你有效。 – McArthey

拉header和footer divs 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>

来源

2012-05-30 03:25:30 saluce

谢谢！这并没有发生在我身上。 – stephenie

100％宽的页眉和页脚

回答

相关问题