如何將內容居中並將背景顏色擴展至頁面的100％？

Question

這種佈局幾乎在網絡上隨處可見，但似乎沒有人提供任何有關其工作原理的信息。我需要將內容居中，並且背景需要擴展頁面的整個寬度示例http://www.fuerstlaw.com/（藍色bg顏色擴展了整個寬度）。這是如何使用CSS完成的？我覺得這是非常簡單的事情，但無法解決。

這裏是我的代碼，我只是想以頭在這個環節的工作，至少到達現場http://gsringolaw.com/home

body { 
    margin: 0; 
    padding: 0; 
} 
#wrapper { 
    width: 960px; 
    margin: 0 auto; 
} 

#masthead { 
    min-width: 100%; 
    margin: 0px; 
    padding: 0px; 
    background-position: 0px 0px; 
    background-color: #00304F; 
    position: relative; 
    z-index: 0; 
} 
#headertext { 
    position: relative; 
    width: 250px; 
    height: 82px; 
    font-family: Georgia, "Times New Roman", Times, serif; 
    color: #FFFFFF; 
    font-size: large; 
    top: -41px; 
    left: 704px; 
} 
#glow { 
    height: 170px; 
    background-image: url('images/glow.png'); 
    position: relative; 
    background-repeat: no-repeat; 
    background-position: center; 
    top: -192px; 
    left: -13px; 
    width: 973px; 
} 


#logo { 
    position: relative; 
    background-image: url('images/gayleringo.png'); 
    background-repeat: no-repeat; 
    width: 528px; 
    height: 113px; 
    top: 28px; 
    left: 0px; 
} 

<div id="wrapper"> 
<div id="masthead" style="height: 171px"> 
    <div id="logo"> 
    </div> 
    <div id="headertext" class="auto-style1"> 
     Louisiana: 504-975-0180<br /> 
     <br /> 
     Florida: 850-292-7059</div> 
    <div id="glow"> 
    </div> 
</div> 
<div id="top_nav"> 
</div> 
<div id="container"> 
    <div id="right_col"> 
    </div> 
    <div id="page_content"> 
    </div> 
</div> 
<div id="footer"> 
</div> 
</div> 

Answer 1

要做到這一點，你需要的包裝和保存內容的實際股利。

<div id="wrapper"> 
    <div id="content"> 
     Content 
    </div> 
</div> 

然後你設置背景爲#wrapper並給予width和margin: 0 auto到#content使其居中。

#wrapper { 
    background: red; 
} 
#content { 
    width: 960px; 
    margin: 0 auto; 
} 

的outter DIV，因爲其display: block的，將延伸到頁面寬度的100％。然後內部div以固定寬度居中。所以實際上，背景不是來自內容本身，而是來自包裝。

我喜歡做的是給內部div一類.inside然後適用於我想要的任何div。例如：

<div id="header"> 
    <div class="inside"> 
     Header 
    </div> 
</div> 
<div id="main"> 
    <div class="inside"> 
     Main content 
    </div> 
</div> 
<div id="footer"> 
    <div class="inside"> 
     Footer 
    </div> 
</div> 

這裏你可以看到一個例子：http://codepen.io/joe/pen/bxueF

Answer 2

的測試頁，你擁有的頁面作爲一個例子使用的背景圖像。如果你右擊頁面上，檢查元素，再看看身上，你會看到下面的風格得到了級聯：

body { 
    ..., 
    background-image: url(images/bg-body.gif); 
    background-repeat: repeat-x; 
    background-position: 0px 181px; 
} 

Answer 3

無論是報頭具有

width:auto 

，是外包裝器

或包裝和mastahead有

width:auto 

Answer 4

添加另一個div您的#wrapper之外的元素，並將其指定爲background-color。

<div id="full-width"> 
    <div id="wrapper"> 
     <div id="masthead" style="height: 171px"> 
      <div id="logo"> 
     </div> 
      <div id="headertext" class="auto-style1"> 
      Louisiana: 504-975-0180 
     <br> 
     <br> 
      Florida: 850-292-7059 
      </div> 
      <div id="glow"> 
      </div> 
     </div> 
    </div> 
</div> 


#full-width { 
    width: 100%; 
    background: #00304F; 
} 

Answer 5

您可以試試。

  <div id="wrapper"> 
       <div id="banner"> 
       <div id="banner-inside"> 
        <div id="content">content</div> 
       </div> 
       </div> 
      </div> 

      //css 
      #wrapper{ 
      width:100%; 
      } 
      #banner{ 
      width:100%; 
      background-color:blue; 
      } 
      #banner-inside{ 
      width:980px; 
      margin:0 auto; 
      } 
      #content{ position:relative; top:0;} 

Answer 6

#content{ 
    width: 960px; //tells the div to be exactly 960px wide 
    margin: 0 auto; //tells the content to be centered with 0 px to surrounding object 
    background-color: red; 
} 

#background{ 
    width: 100%; //tells the outer div to be 100% of screen width 
    background-color: blue; 
} 

創建兩個div的一個與一個叫後臺裏面的id內容，多數民衆贊成。

Answer 7

您將需要您的彩色DIV寬度爲100％。在此DIV內部，將剩餘的DIV和任何其他元素/圖形與和margin的0 auto一起放置。

#masthead { 
min-width: 100%; 
margin: 0px; 
padding: 0px; 
background-position: 0px 0px; 
background-color: #00304F; 
position: relative; 
z-index: 0; 
} 

#divInsideIt { 
width:800px; 
margin: 0 auto; 
} 

Answer 8

body {height:100%;font-size:12px;} 

body, body > section, body > header {width: 100%;margin:0; padding:0;} 

.container {width:960px; margin:0 auto;} 

header { 
    background: #1234ff; 
    margin-bottom:3em;} 

header .container { 
    background: #123456; 
    padding: 0 1em; 
    *zoom: 1;/* clear floats fix - fix for IE*/} 
header .container:after { /* clear floats fix */ 
    content: ""; display: table; clear: both; } 
/* Logo */ 
header h1, header h1 a { 
    background: url('/images/logo.png') no-repeat; /*set the url of your image and make sure it does repeat*/ 
    height:60px; /*set this to the height of your logo*/ 
    width: 175px; /*set this to the width of your logo*/} 

/*Now we want to float the logo and the phone number sections so that the appear on the left and right*/ 
header h1 {float:left;} 
header aside {float:right;} 
/*make logo clickable, must set anchor to same size as its parent*/ 
header h1 a { 
    display: block;} 

header aside { 
    background: #123456; 
    color:white; 
    padding:.5em 1em; 
    text-align:right;} 

header p {font-size:2em;line-height: .75em;} 

HTML

<body id="wrapper"> 
    <header> 
    <div class="container"> 
     <!--use css to add image to h1---> 
     <h1><a title="company name" rel="bookmark"></a></h1> 
     <aside> 
     <p>Louisiana: <a>504-975-0180</a></p> 
     <p>Louisiana: <a>504-975-0180</a></p> 
     </aside> 
    </div> 
    </header> 
    <section> 
    <div class="container" id="content"> 
     <p> 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
     </p> 
    </div> 
    </section> 

</body>