我必須添加額外的div才能達到此目的嗎？

我想知道，如果我希望頁眉的紫色和頁腳的藍色在頁面上延伸100％，但保持中間的內容與中間的橙色對齊，應該如何實現它？我必須添加額外的div才能達到此目的嗎？

我是否必須在頁眉和頁腳周圍添加額外的100％div並在其中添加顏色？這似乎是一個廢話的做法。

這是我從工作的代碼： http://jsfiddle.net/HMsKa/21/

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en-US"> 
<head> 
     <title>Title</title> 
     <link href="/static/css/main.css" rel="stylesheet" type="text/css"> 
    </head> 
    <body> 
     <div id="container"> 
      <div id="header" class="thin_width" > 

         <a href="/"><img src="/static/img/header.jpg" id="logo" alt="coming soon" title="coming soon"></a> 
         <ul> 
          <li><a href="/posts/list/">Link1</a></li> 
          <li><a href="/posts/create/">Link 2</a></li> 
          <li><a href="/about">Link 3</a></li> 
         </ul> 
      </div> 
      <div id="content" class="thin_width"> 
      <h1>Sed ut perspiciatis unde</h1> 
      <form id="searchForm" action="/search"> 
       <input type="text" name="kw" class="field r2 lft dc1 tc5 b1 ts3" id="field_regular" placeholder="Keyword"> 
       <input type="text" name="loc" class="field r2 lft dc1 tc5 b1 ts3" id="field_regular" placeholder="Location"> 
       <input type="submit" class="button r2 b1 ts3" id="button_search" value="Search"> 
      </form> 
      <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>    
      <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> 
      <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> 
      <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> 
      <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> 
      <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> 
      <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> 
      <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> 
      <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> 
      <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> 
      <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> 
      <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> 
      <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> 
      <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> 
      <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> 
      <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> 
      <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> 
      <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> 
      <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p> 
     </div> 
     <div id="footer" class="thin_width"> 
      &#169; 2012 Company, Inc. 
      <ul> 
       <li><a href="/contact">Contact</a></li> 
       <li><a href="/faq">FAQ</a></li> 
       <li><a href="/terms">Terms</a></li> 
       <li><a href="/privacy">Privacy</a></li> 
      </ul> 
     </div> 
     </div> 
    </body> 
</html>

CSS

/* GENERAL */ 
html { height:100%; } 
body { height:100%; font-family: Arial, Helvetica, sans-serif; font-weight:normal; font-style:normal; font-size:100%; } 
p { font size: 13px; margin: 10px 0; padding: 0; } 
h1 { font-size: 22px; } 
h2 { font-size: 17px; } 
h3 { font-size: 14px; } 
blockquote { font-style: italic; } 

.thin_width { width: 600px; } 

#container { min-height: 100%; position: relative; background-color: red; 
width: 600px; 
margin: 0 auto; 
} 
#content {padding-bottom: 80px; background-color: orange;} 
#footer { 
    position:absolute; 
    bottom: 0; 
    clear: both; 
    float:left; 
    height:60px; 
    background-color: blue; 
} 

#footer li { display:inline; } 

#header {background-color: purple;}

來源

2012-10-10 James Willson

你不能合併position：absolute和float：left。這個不成立。 –

你可以這樣說：My Fiddle

如何做到這一點：

從包裝div只要拿出你的頁眉和頁腳，並給予100％的寬度頁眉和頁腳。

爲了使在中心頁眉和頁腳的內容，你需要用你的頁眉和頁腳內容在一個包裝DIV，給它的600px;一個width和使用margin: auto;，使之在你的

頁面的流量

來源

2012-10-10 14:55:08

啊，這是如此接近！然而，在你的例子中，沒有太多的內容，頁腳並不像第一個例子那樣保持停靠狀態：http://jsfiddle.net/HMsKa/30/有沒有一種方法可以輕鬆解決這個問題，並保持乾淨的代碼？ –

@JamesWillson即使頁面不正確，你也希望頁腳停靠在底部嗎？你可以試試這個 - http://ryanfait.com/sticky-footer/ –

那就對了。我看看這個，看看我能不能工作 –

我必須添加額外的div才能達到此目的嗎？

回答

相關問題