1. 首頁
  2. 問答
  3. 爲什麼X值和X值不一致？

爲什麼X值和X值不一致？

2017-10-21 69 views
1

我正在爲GitHub上的開源項目做出貢獻，我對這個特定問題感到非常困惑。爲什麼X值和X值不一致？

問題在於，一旦有足夠的內容，頁腳（具有fixed的位置）會掩蓋某些內容。

我假定修復此問題將是作爲施加給定值到的footer的height，然後使用的main的margin-bottom，這是保持內容的容器相同的值一樣簡單。例如...

main { margin-bottom : 3vh } 
footer { height  : 3vh }

但是 - 無論出於何種原因 - 這些值從來沒有正確對應。

這到底是怎麼回事？

/* Friends of Girl Develop It Columbus styles */ 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
header { 
 
    background: black; 
 
} 
 

 
main { 
 
    max-width: 800px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    
 
    margin-bottom: 3vh; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
footer { 
 
    width: 100%; 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    text-align: center; 
 
    background: #000; 
 
    padding: 10px 0; 
 
    
 
    opacity: 0.5; /* for testing */ 
 
    height: 3vh; 
 
} 
 

 
footer a { 
 
    color: #fff; 
 
    font-size: 1.2em; 
 
}
<!doctype html> 
 
<html> 
 
    <head> 
 
    <title>Friends of Girl Develop It Columbus!</title> 
 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
 
    </head> 
 
    <body> 
 
    <header> 
 
     <img src="images/gdic.jpeg" width="180" height="180" alt="GDIC" > 
 
    </header> 
 
    <main> 
 

 
     <h1>Friends of Girl Develop It Columbus</h1> 
 
     <!-- Copy the template below, paste it below the last person's entry, and add your information! 
 

 
     <li class="friend"> 
 
      <strong class="name">Replace this text with your name!</strong> is on 
 
      <a class="github-repo" href="REPLACE_THIS_WITH_YOUR_GITHUB_PROFILE_URL">GitHub</a> 
 
     </li> 
 

 
     --> 
 

 
     <h2>In no particular order!</h2> 
 

 
     <ul class="friends"> 
 
     <li class="friend"> 
 
      <strong class="name">Caitlin</strong> is on 
 
      <a class="github-repo" href="https://github.com/csteinert">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">Parker</strong> is on 
 
      <a class="github-repo" href="https://github.com/parkerdyer" title="Parker's GitHub">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">Melissa</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">Anthony</strong> is on 
 
      <a class="github-repo" href="https://github.com/gtkpr">GitHub</a> 
 
     </li> 
 
     
 
     
 
     <li class="friend"> 
 
      <strong class="name">1</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">2</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">3</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">4</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">5</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">6</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">7</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">8</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">9</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">10</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">11</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">12</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">13</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">14</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">15</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">16</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">17</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">18</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">19</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">20</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">21</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">22</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">23</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">24</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">25</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">26</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">27</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">28</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">29</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">30</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">31</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">32</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">33</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">34</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">35</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">36</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">37</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">38</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">39</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">40</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">41</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">42</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">43</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">44</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">45</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">46</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">47</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">48</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">49</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">50</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     
 
     
 
     </ul> 
 
    </main> 
 
    <footer> 
 
     <a href="https://github.com/csteinert/friends-of-gdic">View repository</a> 
 
    </footer> 
 
    </body> 
 
</html>

起初我還以爲是因爲字體是防止頁腳從萎縮，但其實這有什麼關係呢。

我附上另一種解決方案的演示（不工作，但是沒有），我想出了下面，也開始漏洞，如果你調整的--footer-height值。

/* Friends of Girl Develop It Columbus styles */ 
 

 
/*************************************************** newly added */ 
 
:root {     /*          */ 
 
    --footer-height: 40px; /* value can be adjusted to your liking */ 
 
}      /*          */ 
 
/*****************************************************************/ 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
header { 
 
    background: black; 
 
} 
 

 
main { 
 
    max-width: 800px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    /************************************************* newly added */ 
 
    margin-bottom: calc(var(--footer-height) * 1); /*    */ 
 
    /*                */ 
 
    /* you can increase the multiplier to create makeshift padding */ 
 
    /* or margin.             */ 
 
    /*                */ 
 
    /***************************************************************/ 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
footer { 
 
    /*********************************************** newly added */ 
 
    height: var(--footer-height); /*        */ 
 
    /*************************************************************/ 
 
    width: 100%; 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    text-align: center; 
 
    background: #000; 
 
    padding: 10px 0; 
 
    
 
opacity:0.5; 
 
} 
 

 
footer a { 
 
    color: #fff; 
 
    font-size: 1.2em; 
 
}
<body> 
 
    <header> 
 
     <img src="images/gdic.jpeg" width="180" height="180" alt="GDIC" > 
 
    </header> 
 
    <main> 
 

 
     <h1>Friends of Girl Develop It Columbus</h1> 
 
     <!-- Copy the template below, paste it below the last person's entry, and add your information! 
 

 
     <li class="friend"> 
 
      <strong class="name">Replace this text with your name!</strong> is on 
 
      <a class="github-repo" href="REPLACE_THIS_WITH_YOUR_GITHUB_PROFILE_URL">GitHub</a> 
 
     </li> 
 

 
     --> 
 

 
     <h2>In no particular order!</h2> 
 

 
     <ul class="friends"> 
 
     <li class="friend"> 
 
      <strong class="name">Caitlin</strong> is on 
 
      <a class="github-repo" href="https://github.com/csteinert">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">Parker</strong> is on 
 
      <a class="github-repo" href="https://github.com/parkerdyer" title="Parker's GitHub">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">Melissa</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">Anthony</strong> is on 
 
      <a class="github-repo" href="https://github.com/gtkpr">GitHub</a> 
 
     </li> 
 
     
 
     
 
     <li class="friend"> 
 
      <strong class="name">1</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">2</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">3</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">4</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">5</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">6</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">7</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">8</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">9</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">10</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">11</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">12</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">13</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">14</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">15</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">16</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">17</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">18</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">19</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">20</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">21</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">22</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">23</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">24</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">25</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">26</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">27</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">28</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">29</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">30</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">31</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">32</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">33</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">34</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">35</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">36</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">37</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">38</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">39</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">40</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">41</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">42</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">43</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">44</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">45</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">46</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">47</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">48</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">49</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     <li class="friend"> 
 
      <strong class="name">50</strong> is on 
 
      <a class="github-repo" href="https://github.com/melissa3000">GitHub</a> 
 
     </li> 
 
     
 
     
 
     </ul> 
 
    </main> 
 
    <footer> 
 
     <a href="https://github.com/csteinert/friends-of-gdic">View repository</a> 
 
    </footer> 
 
    </body> 
 
</html>

來源

2017-10-21 Anthony

+0

如果數據無法放入您設置它將不得不某處溢出所需的高度... –

+0

@ZacharyWeixelbaum數據符合罰款。高度自動調整。你可以給'main'一個邊框來測試。我編輯了我的問題，希望能夠增加其清晰度 – Anthony

+0

這就是我沒有閱讀整個問題所得到的結果:) –

回答

2

頁腳具有10px的填充。考慮刪除填充或使用box-sizing: border-box

來源

2017-10-21 23:49:27

+0

哇。我不知道邊界框也影響填充。謝謝<3 – Anthony

+1

我們從未停止學習。別客氣！ :) –

+0

阿門!!!!!!傳道 – Anthony

相關問題

 相關問題