为什么X值和X值不对应？

时间：2017-10-21 23:18:00

标签： html css html5 css3

我正在为GitHub上的一个开源项目做贡献，我对这一个特定问题感到非常困惑。

问题在于，一旦有足够的内容，页脚位于fixed位置会遮挡部分内容。

我认为修复此问题就像将height的{​​{1}}应用给定值一样简单，然后对footer的{​​{1}}使用相同的值，这是容纳内容的容器。例如...... 

margin-bottom

但是 - 无论出于何种原因 - 价值观似乎永远不会恰当对应。

到底发生了什么事？ 

main
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

1 个答案:

答案 0 :(得分：2)

页脚有10px填充。请考虑删除 padding 或使用box-sizing: border-box

相关问题
最新问题