为什么我的页脚中的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％

回答

相关问题