0

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

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

  • 如何在页面宽度上拉伸页眉和页脚
  • 将内容居中
4

4 回答 4

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>
于 2012-05-01T05:14:53.363 回答
0 
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;
    }

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

于 2012-05-01T04:36:29.800 回答
0

我希望你在看这个：-

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

于 2012-05-01T04:37:32.243 回答
0

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

于 2012-05-01T05:08:42.110 回答