頁腳頁面額外的空間

Question

我正在重建一篇文章，我在「經濟學人」（here）上找到了一篇文章，我遇到了一個問題，頁腳下顯示了一個非常細的空白行。

我真的解決了這個問題，但我不知道爲什麼我的工作。這是它的筆（here），這裏是頁腳和HTML代碼。

/**************** 
Footer 
****************/ 
/* 
The footer is organized into three rows with columns in each row. 
*/ 

footer { 
    height: 400px; 
    border-top: 5px red solid; 
    margin-top: 50px; 
    background-color: #c1c1c1; 
    color: white; 
    background-color: #161616; 
} 

.footer-container { 
    width: 80%; 
    height: 100%; 
    margin: 0 auto; 
} 

footer ul { 
    list-style: none; 
} 

a:link { 
    text-decoration: none; 
    color: #b6b6b6; 
    font-weight: bold; 
    font-size: .9em; 
} 

a:link:hover { 
    color: white; 
} 

.footer-link { 
    padding: 10px 0; 
    color: #b6b6b6; 
    font-weight: bold; 
} 

.footer-link:hover { 
    color: white; 
    cursor: pointer; 
} 

.row-1 { 
    display: flex; 
    height: 50%; 
} 

.row-1-col-1 { 
    width: 10%; 
    text-align: left; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
} 

.row-1-col-1 ul { 
    display: flex; 
    flex-direction: column; 
    justify-content: space-around; 
    margin: 0; 
    padding: 0 15px; 
    height: 70%; 
} 

.row-1-col-2 { 
    width: 60%; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
} 
/* "Keep updated */ 
.row-1-col-2 div p { 
    font-weight: bold; 
    color: #7a7a7a; 
} 

.row-1-col-2 > div { 
    height: 70%; 
    margin-left: 30px; 
    padding-left: 30px; 
    border-left: 1px #7a7a7a solid; 
    border-right: 1px #7a7a7a solid; 
} 

.row-1-col-2 ul { 
    padding: 0; 
    display: flex; 
} 

.footer-s-media-icon { 
    width: 25px; 
    padding: 0 15px; 
    filter: grayscale(100%); 
} 

.row-1-col-3 { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    width: 30%; 
} 

.row-1-col-3 ul { 
    height: 70%; 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
} 

.row-2 { 
    height: 40%; 
    border-top: 1px #7a7a7a solid; 
    border-bottom: 1px #7a7a7a solid; 
} 

.row-2-col-1 { 
    height: 100%; 
} 

.row-2-col-1 > div { 
    margin: 0 auto; 
    width: 35%; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
} 

.row-2-col-1 > div p { 
    margin: 0; 
    text-align: center; 
} 

/* Published since Sept...to take part in... */ 
.row-2-col-1 > div p:first-child { 
    font-weight: bold; 
} 

/* "a severe contest between intellegence... */ 
.row-2-col-1 > div p:nth-child(2) { 
    font-style: italic; 
} 

.row-3 { 
    height: 9%; 
    width: 100%; 
    display: flex; 
} 

.row-3-col-1 { 
    display: flex; 
    width: 100%; 
} 

.row-3-col-1 ul { 
    display: flex; 
    padding: 0; 
    margin-bottom: 0; 
} 

.row-3-col-1 li { 
    padding: 0 8px; 
    font-size: .8em; 
} 

.row-3-col-1 p { 
    margin-bottom: 0; 
    margin-top 0; 
    margin-left: auto; 
    font-size: .8em; 
} 

<footer> 
     <div class="footer-container"> 
     <div class="row-1"> 
      <div class="row-1-col-1"> 
      <ul> 
       <li class="footer-link">Subscribe</li> 
       <li class="footer-link">Contact us</li> 
       <li class="footer-link">Help</li> 
      </ul> 
      </div> 
      <div class="row-1-col-2"> 
      <div> 
       <p>Keep updated</p> 
       <ul> 
       <li><img src="https://www.celestionplus.com/wp-content/themes/celestion-impulse-response-2017/img/icon-facebook.png" class="footer-s-media-icon"></li> 
       <li><img src="http://www.vonmaur.com/Images/Social/twitter-logo-blue.png" class="footer-s-media-icon"></li> 
       <li><img src="https://www.carpetone.com/~/media/CarpetOne/Modules/Global/Footer/SocialLinks/google.png?h=30&w=30&la=en" class="footer-s-media-icon"></li> 
       <li><img src="http://www.shoetastic.ie/skin/frontend/default/theme054/images/linkedin-logo.png" class="footer-s-media-icon"></li> 
       <li><img src="https://2.bp.blogspot.com/-GEyWc6EEApk/VYCEOt34T-I/AAAAAAAAAmw/slVlbI1gy_c/s1600/tumblr%2Blogo%2B30x30.png" class="footer-s-media-icon"></li> 
       <li><img src="http://www.oacsd.org/sysimages/iconIG.png" class="footer-s-media-icon"></li> 
       <li><img src="http://www.sunyjefferson.edu/sites/default/files/images/YouTube-icon.png" class="footer-s-media-icon"></li> 
       <li><img src="http://theriveratranchomirage.com/wp-content/uploads/2015/11/favicon.png" class="footer-s-media-icon"></li> 
       </ul> 
       <a href="google.com">Subscribe to The Economist newsletters</a> 
      </div> 
      </div> 
      <div class="row-1-col-3"> 
      <ul> 
       <li class="footer-link">Advertise</li> 
       <li class="footer-link">Careers</li> 
       <li class="footer-link">Site Map</li> 
       <li class="footer-link">Reprints</li> 
       <li class="footer-link">Media Centre</li> 
      </ul> 
      </div> 
     </div> 
     <div class="row-2"> 
      <div class="row-2-col-1"> 
      <div> 
       <p>Published since September 1843 to take part in</p> 
       <p> 「a severe contest between intelligence, which presses forward, and an unworthy, timid ignorance obstructing our progress.」</p> 
      </div> 
      </div> 
     </div> 
     <div class="row-3"> 
      <div class="row-3-col-1"> 
      <ul> 
       <li>Terms of Use</li> 
       <li>Privacy</li> 
       <li>Cookies</li> 
       <li>Accessibility</li> 
      </ul> 
      <p>Copyright © The Economist Newspaper Limited 2017. All rights reserved.</p> 
      </div> 
     </div> 
     </div> 
    </footer> 

頁腳由三行組成，所有這些行均落入容器內。這些色譜柱的高度爲50％，40％和9％。這個問題是由於第三排有10％的高度而引起的，應該總和爲頁腳容器的全部100％。

我的問題是，爲什麼更改第三排的高度解決了這個問題？有沒有人有任何背景知識可以爲我填寫這些信息？

Answer 1

這是因爲您應用的邊界.row-2不計算爲元素高度的一部分。除了它的高度之外，它們也是。最後.row-2是2px大於40％。

您可以使用box-sizing: border-box;修復此問題。

邊界框

這是通過Internet Explorer使用的盒模型，當文檔處於怪癖模式。請注意，填充和邊框將位於框內，例如.box {width：350px; border：10px solid black;}導致在寬度：350px的瀏覽器中呈現的框。內容框不能爲負數，並且被置爲0，因此無法使用邊框來使元素消失。 這裏的尺寸計算爲：width = border + padding + content的寬度，height = border + padding +內容的高度。

.footer-container > .row-2 { 
    box-sizing: border-box; 
} 

您也可以使用calc()的高度。

.row-2 { 
    height: calc(40% - 2px); 
    border-top: 1px #7a7a7a solid; 
    border-bottom: 1px #7a7a7a solid; 
} 

我用calc（）的一個問題是，如果你改變邊界的厚度，你還必須更新高度值。隨着box-sizing: border-box;它是自動的。