Question

破坏我的大脑如何伸展整个页面

这就是我想弄清楚的......

如何在页面宽度上拉伸页眉和页脚
以内容为中心

Answer 1

所以你希望页眉和页脚在整个页面上延伸（即屏幕的100％），而内容区域设置为任意数字并居中在页面中间？

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>100% Width of header / footer and still center content</title>
  <style type="text/css">
    body { margin: 0; }
    #header { width: 100%; background: red; }
    #content { width: 900px; background: green; margin: 0 auto; }
    #footer { width: 100%; background: blue; }
  </style>
  </head>
  <body>
    <div id="header">Header Area</div>
    <div id="content">Content Area</div>
    <div id="footer">Footer Area</div>
  </body>
</html>

Answer 2

body {
    margin: 0px
    }
.header_wrapper{ width: 100%} //not necessary as it automatically happens
.header{
    //make width whatever you want where the content goes
margin-left: auto;
margin-right: auto;
    }

这是一般的想法。测试一下。添加颜色等等。

Answer 3

我希望你这样看： -

    <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
#header {
height:100px;
background:red;
}

#mid-content {
background:green;
}

#footer {
height:100px;
background:blue;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="mid-content">Tag info
infonewest 4featured faq votes active unanswered
About cs  </div>
<div id="footer"></div>
</body>
</html>

它完全具有100％的宽度......

演示： - http://jsbin.com/eponir/2/edit#html,live

Answer 4

我认为只需将文本对齐中心到页脚div

100％页眉/页脚宽度和静止中心内容

4 个答案: