Question

我是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

Answer 1

您可以添加到.card-list css;

 margin-bottom:100px;

这为区域的底部提供了边距，因此它不会与任何其他元素重叠。

希望它有所帮助！

编辑*

冷却器＆＃39;与我的相比，答案要好得多，因为它可以补偿分辨率和设备之间的缩放。

Answer 2

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

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

页脚隐藏了最后一张卡的一部分，我该如何解决？

2 个答案: