页脚隐藏了最后一张牌的一部分，我该如何解决这个问题？

-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链接。 –

我为你做了一个蹲点， http://plnkr.co/edit/iqoLHe46yxK335MsDknN?p=preview，这让每个人都可以更轻松地看到自己的代码正在运行。 –

您可以添加到您的.card-list CSS;

margin-bottom:100px;

这提供了区域底部的余量，所以它不会与其他元素重叠。

希望它有帮助！

编辑*

冷水机组的回答是好得多比我的，因为它弥补了分辨率和设备之间的比例。

来源

2016-11-22 17:19:49

它的工作原理，谢谢 –

您可以通过将margin-bottom添加到类.card-list中并且它必须等于页脚高度来修复它。

所以只需添加margin-bottom:6%;因为6％是页脚的高度。

来源

2016-11-22 17:22:41 Chiller

它完美的作品，谢谢 –

页脚隐藏了最后一张牌的一部分，我该如何解决这个问题？

回答

相关问题