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

标签 html css web-frontend

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

最佳答案

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

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

关于html - 页脚隐藏了最后一张卡片的一部分，我该如何解决？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40747601/

上一篇：javascript - 样式化 JS 变量

下一篇：html - 具有多个表格的 CSS 表格边框

相关文章：

html - 编程扫描我的网站并查找链接到外部网站的所有页面

javascript - 如何在网页页脚中添加上次修改时间？

javascript - 试图在 javascript 调用中隐藏带有内容的 div

css - 我希望看到我的缩略图大小为 600X400。但是怎么办？

javascript - 获取图像顶部 strip 的 rgba 值

带有意外 "amp"和 ";"的 python url

javascript - Jquery Fadein/FadeOut 同时进行

javascript - 为什么使用专有模板引擎而不是 html5？

javascript - 如何从 <span>price</span> 中检测并捕获更改(更新)的价格？

html - 无法以正确的意图对齐图像旁边的文本

©2024 IT工具网  联系我们