將我的頁腳寬度設置爲100％顯示滾動條

儘管我將頁腳的寬度設置爲100％，但它的寬度方面卻超過了100％。任何想法爲什麼？我知道問題是寬度，因爲當我刪除100％時，它不顯示滾動條。該頁面被分解爲身體>包裝>頁腳這裏是我的代碼：將我的頁腳寬度設置爲100％顯示滾動條

#footer { 
    margin-top: 30px; 
    color: white !important; 
    padding-bottom: 15px; 
    background: black; 
    text-align: center; 
    padding: 20px; 
    height: 40px; 
    min-width: 1000px; 
    width:100%; 
    position:absolute; 
    bottom:0; 
}

而且有身體的CSS：

body { 
    font: normal 12pt Georgia, serif; 
    color: #111; 
    background: #990000; 
    margin: 0 auto; 
    text-align: center; 
    background-position: 50% 50%; 
    min-height: 100%; 

    margin:0; 
    padding:0; 
    height:100%; 
}

和包裝CSS：

#wrapper { 
    min-height:100%; 
    position:relative; 
}

來源

2012-10-01 dreamer_999

這很可能是由於默認Box Model在html頁面中的工作原理：在內容的寬度設置爲100％之後，會添加邊框，邊距和填充，從而將最終寬度增加到100％以上。

對於現代瀏覽器：冰箱大小！

請參閱this jsfiddle與您的原始代碼。
請參閱this newer version與box sizing設置爲border-box（僅適用於較新的瀏覽器）。這個版本沒有顯示水平滾動條（我將最小寬度縮小了很多，或者它會拋棄jsfiddle中的示例）。

舊版本瀏覽器

如果要解決這個問題爲你必須做一些事情在你的CSS填充舊的瀏覽器。將其從頁腳中刪除，然後放置一個「footer-content」div，其邊距等於舊填充。例如：

#footer { 
    /* padding: 20px; removed! */ 
} 
#footer-content { 
    margin: 20px; 
}

來源

2012-10-01 05:24:14 Jeroen

謝謝jsfiddle是一個非常有用的工具！ –

你在頁腳的CSS中設置了填充。這增加了寬度，並使其大於100％。這就是爲什麼你看到一個滾動條。

用以下這些行替換填充。

padding-top:20px; 
padding-bottom:20px;

此外，通過將頁腳div的最小寬度設置爲1000px，您將在瀏覽器屏幕中獲得比1000px更窄的滾動條。

來源

2012-10-01 05:24:37

這工作就像一個魅力！沒有意識到我設置paddint頂部不同。但不是填充：20px相當於填充頂部：20px？ –

@bigollo，當你使用「padding」設置填充時，只有基本上將它設置在所有4個面：頂部，底部，右側和左側。除非指定了需要填充的位置，否則在所有瀏覽器中都是如此。 –

許多瀏覽器在BODY元素周圍都有一個默認邊距，這會增加寬度。

來源

2012-10-01 05:25:30 Barmar

這是因爲填充而發生的。看到你的問題的例證here。

當您使用填充時，大小分別被添加到總高度和寬度。

刪除填充將解決您的問題。 ^Demo

#footer { 
    margin-top: 30px; 
    color: white !important; 
    background: black; 
    text-align: center; 
    height: 40px; 
    min-width: 1000px; 
    width:100%; 
    position:absolute; 
    bottom:0; 
}

另一個好的解決方法是讓瀏覽器不同的方式對待你的元素。通過使用box-sizing屬性。

#footer { 
    /* Add box-sizing */ 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
    margin-top: 30px; 
    color: white !important; 
    padding-bottom: 15px; 
    background: black; 
    text-align: center; 
    padding: 20px; 
    height: 40px; 
    min-width: 1000px; 
    width:100%; 
    position:absolute; 
    bottom:0; 
}

Demo

來源

2012-10-01 05:29:28 Starx

只需添加0填充，0邊框，0保證金在開始的所有元素。

* { 
padding: 0; 
border: 0; 
margin: 0; 
}

來源

2016-06-14 18:07:20

將我的頁腳寬度設置爲100％顯示滾動條

回答

相關問題