頁腳不會伸展到100％寬度

我希望頁腳的寬度能夠拉伸100％的頁面。不過，我已經在HTML文檔的主體上定義了min-width：1000px和max-width：1000px，以幫助創建流暢的佈局。現在，當我創建頁腳將其設置爲最大/最小寬度：100％時，它不會跨越整個頁面，並受限於主體上設置的最小/最大寬度。有沒有一種方法將頁腳的寬度設置爲100％，同時將最小/最大寬度定義爲1000像素的身體？爲HTML和CSS代碼是：頁腳不會伸展到100％寬度

HTML：

<!doctype html> 
<html lang="en"> 
<head> 
Some Text 
</head> 
<body> 

<header> 
Some Text 
</header> 
<section class="mainSection"> 
    <article class="mainArticle"> 
      <header> 
       <h4>Some Text</h4> 
      </header> 
      <p> 
        Some text 
      </p> 
    </article> 
</section> 
<footer> 
    <section class="footerSection"> 
     <article class="footerArticle"> 
      <p>Some Text</p> 
     </article> 
    </section> 
</footer>

CSS：

body{ 
    margin:0px auto; 
    min-width:1000px; 
    max-width:1000px; 
    height:auto; 
    background-color: #97cdcd; 
    background-size: 5px 5px; 
    background-image: linear-gradient(rgba(189, 204, 211, .50) 50%, transparent 50%, transparent); 
    background-image: -webkit-linear-gradient(rgba(189, 204, 211, .50) 50%, transparent 50%, transparent); 
    background-image: -moz-linear-gradient(rgba(189, 204, 211, .50) 50%, transparent 50%, transparent); 
} 
body > footer{ 
    margin:0px; 
    padding:0px; 
    min-width:100%; 
    max-width:100%; 
    background:#ffffff; 
    height:auto; 
}

來源

2012-12-27 Human

而不是定義對身體的最大和最小的寬度，使content div來包裝你的主要內容區域，並在你的內容div上應用該區域的最大和最小樣式。

由於您的頁腳是身體的一個孩子，並且不在正常流程之外，由於盒子模型的原因，它總是受到身體寬度的限制。這實際上非常有用，只要你保持盒子模型的規則和流暢性。所以，如果頁腳不應該被這些屬性限制，那麼這些屬性應該適用於頁腳的一個兄弟，而不是它的父頁。

例如，如果您不需要header也應用這些規則，則可以將section元素上的最大/最小值應用於該元素。否則，這樣做：

<!doctype html> 
<html lang="en"> 
<head> 
Some Text 
</head> 
<body> 
<div class="content-wrapper"> 
<header> 
Some Text 
</header> 
<section class="mainSection"> 
    <article class="mainArticle"> 
      <header> 
       <h4>Some Text</h4> 
      </header> 
      <p> 
        Some text 
      </p> 
    </article> 
</section> 
</div> 
<footer> 
    <section class="footerSection"> 
     <article class="footerArticle"> 
      <p>Some Text</p> 
     </article> 
    </section> 
</footer> 

</body>

CSS：

 
    .content-wrapper{ 
     margin:0px auto; 
     min-width:1000px; 
     max-width:1000px; 
     height:auto; 
     background-color: #97cdcd; 
     background-size: 5px 5px; 
     background-image: linear-gradient(rgba(189, 204, 211, .50) 50%, transparent 50%, transparent); 
     background-image: -webkit-linear-gradient(rgba(189, 204, 211, .50) 50%, transparent 50%, transparent); 
     background-image: -moz-linear-gradient(rgba(189, 204, 211, .50) 50%, transparent 50%, transparent); 
    } 
    body > footer{ 
     margin:0px; 
     padding:0px; 
     min-width:100%; 
     max-width:100%; 
     background:#ffffff; 
     height:auto; 
    }

Obviously some of the styles you may want to apply to the entire body instead of the content-wrapper div, this is just an example.

來源

2012-12-27 17:13:54 taswyn

Simply: No - the footer is a child of the body, and the width percentage property is relative to the parent.

In this case, you have set the body element (parent) to a fixed width, and therefore the child will not be fluid. Instead, by giving it 100% width, you are saying, give it 100% the width of the body element, i.e. 1000px.

The only way to fix it if you're intent on keeping the max and min width properties on the body is by absolutely positioning the footer - not ideal. I would suggest you remove the max and min properties and try a different approach altogether.

來源

2012-12-27 17:14:42 jacktheripper

Short answer: no

the 100% width you give the footer is 100% of the 1000px you gave it's container. The solution to your problem is to put the <header>和<section>一個容器標籤內的標籤，裝上了1000像素的限制。

來源

2012-12-27 17:15:58

的foorer爲人體內部，因此它受限於機身尺寸。

您可以創建在體內的包裝DIV;在包裝div中包含header和mainSection，使其成爲1000px，並使頁腳div 100％。

來源

2012-12-27 17:16:34

頁腳不會伸展到100％寬度

回答

相關問題