CSS寬度：100％不適合屏幕

我試圖讓我的頁腳在頁面的末尾，所以我使用position：absolute和bottom：0來做到這一點。問題是背景顏色將不會延長以適應屏幕，所以我嘗試使用寬度：100％，但現在它有額外的像素CSS寬度：100％不適合屏幕

這是我創建 http://jsfiddle.net/SRuyG/2/ （抱歉，這是一個有點凌亂的例子，我剛剛開始學習CSS）

我也嘗試了一些教程，我發現粘腳，但它也不工作。那麼，我怎樣才能將頁腳設置到頁面底部並且背景適合屏幕尺寸？

謝謝

CSS：

html, body { 
    margin: 0; 
    padding: 0; 
} 

body {  
    font: 13px/22px Helvetica, Arial, sans-serif; 
    background: #f0f0f0; 

} 

.contentWrapper{ 
    min-height: 100%; 
    margin-bottom: -142px; 
} 

.contentWrapper:after { 
    content: ""; 
    display: block; 
    height: 142px; 
} 

nav { 
    background: #222; 
    color: #fff; 
    list-style: none; 
    font-size: 1.2em; 
    padding: 10px 20px; 
    box-shadow: 0px 0px 4px 4px #888888; 

} 

#navBar li{ 
    display:inline; 
} 

#navBar li a{ 
    color: #fff; 
    text-decoration: none; 
    padding: 25px; 
} 
#navBar li a:hover{ 
    background:#fff; 
    color: #222; 
    text-decoration: none; 
    padding: 25px; 
} 

footer { 
    position:absolute; 
    background: #222; 
    color: #fff; 
    list-style: none; 
    font-size: 1.2em; 
    padding: 10px 20px; 
    bottom:0; 
    width: 100%; 

}

HTML：

<body> 

    <nav> 
     <ul id='navBar'> 
      <li><a href="#">link 1</a></li> 
      <li><a href="#">link 2</a></li> 
      <li><a href="#">link 3</a></li> 
     </ul> 
    </nav> 



    <div id="contentWrapper"> 
     <section id="intro"> 
     <header> 
      <h2>Intro</h2> 
     </header> 
     <p>Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah. 
      Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah. 
      Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah. 
     </p> 
     </section> 
    </div> 

    <footer> 
      <section id="about"> 
       <header> 
        <h3>Footer</h3> 
       </header> 
       <p>some text here. </p> 
      </section> 
    </footer> 

</body>

來源

2013-07-26 punkaceratop

嘗試使用box-sizing: border-box;限制邊框和填充區域的寬度爲<footer> - 因爲padding: 10px 20px規則是導致滾動條出現的原因。

footer { 
    position:absolute; 
    background: #222; 
    color: #fff; 
    list-style: none; 
    font-size: 1.2em; 
    padding: 10px 20px; 
    bottom:0; 
    width: 100%; 
    box-sizing: border-box; 
}

http://jsfiddle.net/SRuyG/4/

來源

2013-07-26 19:46:43 Adrift

你的頁腳是身體，這是HTML內內。既然你還沒有宣佈寬度，它不會擴大到超出需要的範圍。針對您的特殊的HTML，你應該做這樣的事情與你的CSS：

body, html { 
    width: 100%; // or body { width: 960px; } if you're using a fixed width 
} 

footer { 
    width: 100%; 
}

最後，請記住，任何寬度的百分比來設置是（幾乎）總是要在比較父。 50％父母中的100％仍然是50％。 75％父母中的50％僅產生總視口寬度的37.5％。

來源

2013-07-26 19:46:29 mikedugan

你可以從頁腳刪除padding: 10px 20px;並添加footer section{margin:10px 20px}

http://jsfiddle.net/SRuyG/5/

來源

2013-07-26 19:51:30 David

這種方法比，如果你需要接受的答案更好支持IE7或更低版本，它不支持box-sizing屬性。 –

試試這個..

從footer..you'll刪除這些規則是細

position:absolute; 
bottom:0; 
width:100%;

updated fiddle here

來源

2013-07-26 20:03:38 sa77

從下面的CSS我已經刪除了padding屬性

footer { 
     position:absolute; 
     background: #222; 
     color: #fff; 
     list-style: none; 
     font-size: 1.2em; 
     bottom:0; 
     width: 100%; 

    }

，並添加這個東西烏爾CSS

footer section 
    { 
     margin:10px 20px; 

    }

來源

2013-07-27 20:47:15

CSS寬度：100％不適合屏幕

回答

相關問題