html 100%宽度页眉和页脚_Html_Css_Header_Width_Footer

html 100%宽度页眉和页脚

html css

html 100%宽度页眉和页脚,html,css,header,width,footer,Html,Css,Header,Width,Footer,我正在设计一个网站，我希望我的页眉和页脚div跨过页面的100%宽度，并且从页面的绝对顶部和底部开始，没有空格我现在有这个 <title>Untitled Document</title> <style type="text/css"> @import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow); #header { background: #636769; } #navi

我正在设计一个网站，我希望我的页眉和页脚div跨过页面的100%宽度，并且从页面的绝对顶部和底部开始，没有空格

我现在有这个

<title>Untitled Document</title>
<style type="text/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;
}
</style>
</head>



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

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

<!-- begin navigation -->
  <div id="navigation">
    <ol>
    <li>link1</li>
    <li>link2</li>
    <li>link3</li>
    <li>link4</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>
</html>

无标题文档
@导入url(http://fonts.googleapis.com/css?family=PT+Sans+窄带）；
#标题{
背景#636769；
}
#航行{
}
身体{
字体系列：“PT Sans Rown”，无衬线；
字号：16pt；
背景：url（../images/texture.png）；
}
#包装纸{
宽度：938px；
保证金：0自动；
填充：20px 20px；
背景：白色；
}
#页脚{
背景#636769；
}
内容
链接1
链接2
链接3
链接4
标题
内容
内容

我希望页眉和页脚看起来像这样

谢谢你，尼尔。

你可能需要覆盖

主体

元素的

边距

（例如，Chrome将其设置为8px。

在顶部添加css：

* {
 margin:0px;
 padding:0px;
}

标题：

#header {
    background: #636769;
    position:relative;
    width:100%;
}

页脚：

#footer {
   background: #636769;
    width:100%;
    position:relative;
    bottom:0px;
}

将此添加到css中，始终添加此css以初始化所有元素html的所有css，请参见以下示例：

   html, body, div, span, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   a, abbr, acronym, address, big, cite, code,
   del, dfn, em, font, img, ins, kbd, q, s, samp,
   small, strike, strong, sub, sup, tt, var,
   b, u, i, center,
   dl, dt, dd, ol, ul, li,
   fieldset, form, label, legend,
   table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* Don't kill focus outline for keyboard users: http://24ways.org/2009/dont-lose-your-focus */
a:hover, a:active {
    outline: none;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;`enter code here`
    border-spacing: 0;
}
#header {
    background: #636769;
}

#navigation {
}

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

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

#footer {
   background: #636769;
    position: absolute;
    bottom: 0;
    width: 100%;
}