爲什麼我的頁腳中的CSS邊界推頁面剛剛超過100％

我使用this method在頁面的底部，讓我的頁腳正常。爲什麼我的頁腳中的CSS邊界推頁面剛剛超過100％

然而，當我添加邊框到我的頁腳，我結束了一個滾動條，而不管屏幕上的內容。我的困惑是：

我認爲邊界功能外部填充，但內部邊緣，如填充他們不會影響div外部任何佈局。

這是錯誤的嗎？

這裏是我的骨架HTML：

<body> 
    <div class="wrapper"> 
     <div id="top"></div> 
     <div id="body"> 
      <div id="box1"></div> 
      <div id="box2"></div>   
     </div> 
     <div class="push"></div> 
    </div> 
    <div class="footer"></div> 
</body>

這裏是相關的CSS：

 #top 
     { 
      height: 105px; 
      border-bottom-style: solid; 
      border-bottom-color: #044E97; 
      border-bottom-width: 7px; 
     } 

    #body 
     { 
      margin-top: 25px; 
      width: 100%; 
      background-color: white; 
      color: #282828; 
      font-size: 85%; 
     } 

    #box1 
     { 
      width: 460px; 
      float: left; 
      margin-left: 25px; 
      margin-right:75px; 
     } 

    #box2 
     { 
      margin-left: 25px; 
      margin-top: 15px; 
      padding-top: 0%; 
      padding-bottom:0%; 
      margin-bottom:45px; 
      width: 350px; 
      height: 320px; 
      float:left; 
      border-top-style: solid; 
      border-top-color: #FFFFFF; 
      border-top-width: 10px; 
     }   
    html 
     { 
      height: 100%; 
     } 
    body 
     { 
      min-height: 100%; 
      background-color: white; 
      margin: 0; 

     } 
    html, body 
     { 
      min-height:100%; 
      position:relative; 
     } 

    .wrapper 
     { 
      min-height: 100%; 
      height: auto !important; 
      height: 100%; 
      margin: 0 auto -3em; 
     } 
    .footer, .push 
     { 
      height: 3em; 
      clear: both; 
     } 
    .footer 
     { 
      width:100%; 
      background-color: #0563A1; 
      border-top-style: solid; 
      border-top-color: #044E91; 
      border-top-width: 8px; 
      color: white; 
      font-size: 77%; 
      padding-top:.3em; 
      padding-bottom:.3em; 
     }

如果我改變頁腳div來沒有填充，滾動條清除。

來源

2015-07-10 COMisHARD

可能重複到> https://stackoverflow.com/questions/3443606/make-footer-stick-to-bottom-of-page-correctly – vanburen

這種假設是不正確的：

我以爲邊框運作外填充，但內部空間，使得像利潤率不影響任何佈局

頁邊距和邊界確實會影響佈局，這是隻是它們位於填充區之外。間距層次結構從明確定義的尺寸（寬度和高度）開始，然後是填充，然後是邊框，然後是邊距。

如果邊界和邊緣沒有佈局影響，它會然後不可能創造元件（沒有邊距），或相鄰元件的邊框將重疊（邊界佔用沒有額外的空間）之間的間隔。

您面臨的問題是，邊界計算不是寬度或高度的一部分 - 當您在身體的底部留下3em空間時，3em高的頁腳將填充空間。但是，當你添加邊框和/或填充到它，這將增加額外的垂直高度（8像素的頂部填充的總和，以及頂部和0.3em每個的底部邊界）所定義的高度，使其超過3EM並因此觸發溢出。

要強制頁腳粘到3em，您可以使用box-sizing: border-box強制height屬性考慮邊框寬度和填充，或者height: calc(3em - 0.6em - 8px)手動降低頁腳高度，以便高度，頂部填充頂部和底部的邊框寬度保持在3em。

來源

2015-07-10 05:37:30 Terry

非常有幫助的答案。我在上面編輯過，意思是說「像填充一樣，它們不影響div外部的任何佈局。」這個假設是正確的嗎？無論哪種方式，我會使用您的解決方案，並得到這個修復。謝謝 – COMisHARD

非常感謝。使用框大小，現在我的網站看起來更加清晰。謝謝。 – COMisHARD

改變你的盒子模型邊界框，就像這樣：

html{box-sizing: border-box;}

讓我知道，如果它幫助。

來源

2015-07-10 05:36:02

這也是正確的，上面的人剛剛提供了相同的解決方案和更多的解釋。謝謝 – COMisHARD

爲什麼我的頁腳中的CSS邊界推頁面剛剛超過100％

回答

相關問題