フッターは最後のカードの一部を隠していますが、どうすれば修正できますか？

-1

CSSとHTMLの新機能です。私のコードは以下の通りです。フッターは最後のカードから一部を隠します。これをどうやって解決するのですか？また、これがこのデザインを実装する正しい方法であるか、より良い方法があるかどうかを知りたいですか？フッターは最後のカードの一部を隠していますが、どうすれば修正できますか？

私のコード： http://plnkr.co/edit/iqoLHe46yxK335MsDknN?p=preview

<!DOCTYPE html> 
<html> 
    <head> 
     <title>First</title> 
    <script src="jquery-3.1.1.min.js"></script> 

<style> 

#container{ 
    width: 100%; 
    padding: 0 0 0 0%; 
    font-size: 0; 
} 


.container-header-menu{ 
    position: fixed; 
    top: 0; 
    width: 100%; 
    height: 10%; 
    padding: 0 0 0 0%; 
    font-size: 0; 
    z-index: 10; 
} 

body { 
    margin:0px; 
} 
.header{ 
    position: relative; 
    top: 0; 
    width: 100%; 
    background-color: #182538; 
    margin: 0px; 
    text-align: center; 
    display:inline-block; 
    font-size: 1rem; 
} 

.header-left-text{ 
    display: inline-block; 
    color: #FFFFFF; 
    text-align: center; 
    vertical-align: middle; 
    line-height: normal; 
    float: left; 
    padding-left: 1cm; 
    font-family: sans-serif; 
    font-size: 80%; 
} 

.header-right-text{ 
    display: inline-block; 
    color: #FFFFFF; 
    text-align: center; 
    vertical-align: middle; 
    line-height: normal; 
    float: right; 
    padding-right: 2cm; 
    font-family: sans-serif; 
    font-size: 80%; 
} 

.menu{ 
    display:inline-block; 
    position:relative; 
    top: 0; 
    width: 100%; 
    background-color: #1F2D48; 
    margin: 0px; 
    text-align: center; 
    font-size: 1rem; 
} 


.menu-text{ 
    display: inline-block; 
    color: #FFFFFF; 
    text-align: left; 
    vertical-align: middle; 
    line-height: normal; 
    float: right; 
    padding-right: 2cm; 
    font-family: sans-serif; 

} 

.menu-item{ 
    width:13%; 
    float:left; 
    padding-right: 12px; 
} 



.card-list{ 
    position: relative; 
    top: 100px; 
    width:13%; 
    height:83%; 
    float:left; 
    padding-right: 12px; 
    overflow-y: auto; 
    z-index: 5; 
} 

.card { 
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); 
    transition: 0.3s; 
    width: 100%; 
    margin: 5px; 
    background-color: #F2F2F2; 
    z-index: 5; 
} 

.card:hover { 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); 
} 


.card-header{ 
    background-color: #F2F2F2; 
} 


.card-container { 
    background-color: #FFFFFF; 
    width: 100%; 
    position: relative; 
    margin: 0px; 
    text-align: center; 
    display:inline-block; 
    font-size: 1rem; 
} 


.card-container-header { 

    width: 100%; 
    position: relative; 
    margin: 0px; 
    text-align: center; 
    display:inline-block; 
    font-size: 1rem; 
} 



.footer{ 
    position: fixed; 
    bottom: 0; 
    margin: 0px; 
    width: 100%; 
    height: 6%; 
    padding: 0 0 0 0%; 
    z-index: 100; 
    background-color: #1F2D48; 
    text-align: center; 

} 


.footer-left-text{ 
    color: #FFFFFF; 
    display: inline-block; 
    text-align: center; 
    vertical-align: middle; 
    line-height: normal; 
    float: left; 
    padding-left: 1cm; 
    font-family: sans-serif; 
    font-size: 80%; 
} 

.footer-right-button{ 
    display: inline-block; 
    text-align: center; 
    vertical-align: middle; 
    line-height: normal; 
    float: right; 
    font-family: sans-serif; 
    font-size: 100%; 
    background-color: #FFFFFF; /* Green */ 
    border: none; 
    color: #1F2D48; 
    padding: 8px 32px; 
    border-radius: 8px; 
    margin: 4px; 
    border: 2px solid #1F2D48; 
} 


</style> 

    </head> 

    <body> 
    <div id="container"> 

<!--  header and menu bar container --> 
     <div class="container-header-menu"> 

     <!-- header --> 
      <div class="header"> 
      <p class="header-left-text"><strong>Lead Tracking:</strong> John Smith</p> 
      <p class="header-right-text">Monday, November 19, 2016</p> 
      </div> 

<!--    menubar --> 
      <div class="menu"> 

       <div class ="menu-item"> 
        <p class="menu-text">Mapping</p> 
       </div> 

       <div class ="menu-item"> 
        <p class="menu-text">Geology</p> 
       </div> 

       <div class ="menu-item"> 
        <p class="menu-text">Engineering</p> 
       </div> 

       <div class ="menu-item"> 
        <p class="menu-text">Negotiating</p> 
       </div> 

       <div class ="menu-item"> 
        <p class="menu-text">Deal</p> 
       </div> 

       <div class ="menu-item"> 
        <p class="menu-text">Rejected</p> 
       </div> 

       <div class ="menu-item"> 
        <p class="menu-text">Pass</p> 
       </div> 

      </div> 


     </div> 





<!-- card list for mapping--> 



     <div class="card-list"> 

     <div class="card"> 
      <div class="card-container-header"> 
       <h1 style="color:red; text-align:left;"><b>74</b></h1> 
       <h3 style="text-align:left;"><b>#1213-2324</b></h3> 
      </div> 

      <div class="card-container"> 
       <h4><b>John Doe</b></h4> 
       <p>Architect & Engineer</p> 
     </div> 

     </div> 

     <hr> 

     <div class="card"> 
      <div class="card-container-header"> 
       <h1 style="color:red; text-align:left;"><b>74</b></h1> 
       <h3 style="text-align:left;"><b>#1213-2324</b></h3> 
      </div> 

      <div class="card-container"> 
       <h4><b>John Doe</b></h4> 
       <p>Architect & Engineer</p> 
     </div> 

     </div> 

     <hr> 

     <div class="card"> 
      <div class="card-container-header"> 
       <h1 style="color:red; text-align:left;"><b>74</b></h1> 
       <h3 style="text-align:left;"><b>#1213-2324</b></h3> 
      </div> 

      <div class="card-container"> 
       <h4><b>John Doe</b></h4> 
       <p>Architect & Engineer</p> 
      </div> 

     </div> 

     <hr> 

     <div class="card"> 
      <div class="card-container-header"> 
       <h1 style="color:red; text-align:left;"><b>74</b></h1> 
       <h3 style="text-align:left;"><b>#1213-2324</b></h3> 
      </div> 

      <div class="card-container"> 
       <h4><b>John Doe</b></h4> 
       <p>Architect & Engineer</p> 
      </div> 

      </div> 

     <hr> 


     </div> 


<!-- card list for engineering--> 


     <div class="card-list"> 






     <div class="card"> 
      <div class="card-container-header"> 
       <h1 style="color:orange; text-align:left;"><b>74</b></h1> 
       <h3 style="text-align:left;"><b>#1213-2324</b></h3> 
      </div> 

      <div class="card-container"> 
       <h4><b>John Doe</b></h4> 
       <p>Architect & Engineer</p> 
      </div> 

     </div> 

     <hr> 

     <div class="card"> 
      <div class="card-container-header"> 
       <h1 style="color:red; text-align:left;"><b>74</b></h1> 
       <h3 style="text-align:left;"><b>#1213-2324</b></h3> 
      </div> 

      <div class="card-container"> 
       <h4><b>John Doe</b></h4> 
       <p>Architect & Engineer</p> 
      </div> 

     </div> 

     <hr> 

     <div class="card"> 
      <div class="card-container-header"> 
       <h1 style="color:red; text-align:left;"><b>74</b></h1> 
       <h3 style="text-align:left;"><b>#1213-2324</b></h3> 
      </div> 

      <div class="card-container"> 
       <h4><b>John Doe</b></h4> 
       <p>Architect & Engineer</p> 
      </div> 

      </div> 



     </div> 


    </div> 


    <div class="footer"> 

    <p class="footer-left-text"><strong>Footer</strong></p> 
    <button type="button" class="footer-right-button" onclick="alert('Hello world!')">status</button> 
    <button type="button" class="footer-right-button" onclick="alert('Hello world!')">map</button> 
    <button type="button" class="footer-right-button" onclick="alert('Hello world!')">details</button> 
    </div> 


    </body> 
</html>

Pastie Link

出典

2016-11-22 Amr Rady

質問に関連するコードを入力してください。 –

私はStackoverflowがそのサイズのコードを受け入れなかったので、私は質問に自分のコードでPastieのリンクをputtedしました。 –

私はあなたのためにプランナーを作った。 http://plnkr.co/edit/iqoLHe46yxK335MsDknN?p=preview、これにより誰でもあなたのコードが実際に見えるようになります。 –

あなたの.card-list CSSに追加することができます。

margin-bottom:100px;

これは、領域の下部にマージンを提供するため、他の要素と重複しません。

希望すると助かります！それは解像度とデバイス間のスケーリングを補うよう

編集*

チラー答えは、鉱山に比べてはるかに優れています。

出典

2016-11-22 17:19:49

それは働く、ありがとう –

あなたはclass-card-listにmargin-bottomを追加することで修正でき、それはフッターの高さと等しくなければなりません。

margin-bottom:6%;を追加すると、フッターの高さが6％になるためです。

出典

2016-11-22 17:22:41 Chiller

それは完全に働く、ありがとう –

フッターは最後のカードの一部を隠していますが、どうすれば修正できますか？

答えて

関連する問題