1. 首页
  2. 问答
  3. 为什么X值和X值不一致？

为什么X值和X值不一致？

2017-10-21 116 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

相关问题

 相关问题