1. 首頁
  2. 問答
  3. 100％頁眉/頁腳的寬度和仍然中心內容

100％頁眉/頁腳的寬度和仍然中心內容

2012-05-01 97 views

回答

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-01 04:36:29 Andy

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-01 04:37:32

0

我覺得只是給文本對齊中心頁腳div

來源

2012-05-01 05:08:42 Chandrakant

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-01 05:14:53 Minja

相關問題

 相關問題