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 に答える