1. 首頁
  2. 問答
  3. 使用CSS，即使縮放視口時，如何將div標籤設置爲完全寬度<body>？

使用CSS，即使縮放視口時，如何將div標籤設置爲完全寬度<body>？

2012-09-16 52 views
3 
<!DOCTYPE html> 

<html> 
    <head> 
     <meta charset="utf-8" /> 
     <style> 
     html { 
      margin: 0; 
      padding: 0; 
      border: 0; 
     } 

     body, div, span, applet, object, embed, iframe, pre, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, address, big, cite, code, del, dfn, b, strong, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, table, tbody, dl, dt, dd, ol, ul, li, fieldset, form, button, label, legend, caption, hr, noscript { 
      margin: 0; 
      padding: 0; 
      border: 0; 
      outline: none; 
      list-style: none; 
      font-weight: normal; 
      font-style: normal; 
      font-size: 100%; 
      font-family: inherit; 
      vertical-align: top; 
      text-decoration: none; 
      position: relative; 
     } 

     body, html { 
      height: 100%; 
      border: none; 
      top: 0; 
      font: 12px/1.3 Helvetica, Arial, sans-serif; 
      color: #131318; 
      background: #E7E7E7; 
      text-align: left; 
     } 

     .full { 
      width: 100%; 
      float: left; 
     } 

     .top { 
      padding: 20px 0; 
      background: #FF0000; 
     } 

     .center { 
      width: 900px; 
      margin: 0 auto; 
     } 

     .shell { 
      width: 860px; 
      padding: 20px; 
      float: left; 
      background: #FFF; 
     } 
     </style> 
    </head> 
    <body> 
     <div class="full top">logo</div> 
     <div class="full"> 
      <div class="center"> 
       <div class="shell"> 
        <p>Lorem</p> 
        <p>Lorem</p> 
        <p>Lorem</p> 
        <p>Lorem</p> 
        <p>Lorem</p> 
        <p>Lorem</p> 
        <p>Lorem</p> 
        <p>Lorem</p> 
        <p>Lorem</p> 
        <p>Lorem</p> 
       </div><!--/.shell--> 
      </div><!--/.center--> 
     </div><!--/.full--> 
    </body> 
</html>

您可以here看到（或訪問here和向下收縮你的瀏覽器，直到有一個水平滾動條，然後向右滾動），頂部紅色欄始終視口的大小，而不是填充增加頁面的整個寬度。我怎樣才能解決這個問題？我怎樣才能使這樣的酒吧（我的頭菜，菜單等）真正填充頁面的寬度，無論視圖端口調整大小（最好不使用JavaScript）？使用CSS，即使縮放視口時，如何將div標籤設置爲完全寬度<body>？

來源

2012-09-16 orokusaki

回答

相關問題

 相關問題