1. ホーム
  2. 質問と答え
  3. X値とX値が一致しないのはなぜですか？

X値とX値が一致しないのはなぜですか？

2017-10-21 15 views
1

私は今GitHubのオープンソースプロジェクトへの貢献に取り組んでいます。私はこの1つの特別な問題で絶対に混乱しています。X値とX値が一致しないのはなぜですか？

フレーマーの位置がfixedの場合、十分なコンテンツがあると一部のコンテンツが不明瞭になるという問題があります。

Iは、コンテンツを保持する容器であり、この問題を修正する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

amen !!!!!!説教 – Anthony

関連する問題

 関連する問題