为什么这个页脚如此之大？ [英] Why this footer is so big?

问题描述

由于缺乏内容，我的页脚非常大。我试图通过添加高度来限制尺寸：10％到CSS，但它不起作用。我怎样才能限制它。到10％的屏幕？ （我希望它能够响应）。

以下是HTML：

 < div class =wrapper col7> 
< div id =copyright> 
 
< div class =list-groupstyle =float：left> 
 
 
< a class =list-group-itemhref =target =_ blank>< i class =fa fa-linkedin-square fa-5x FA-COG丽>< / I>< / A> 
 
 
< / div> 
< br /> < p>设计< / p> 
< div class =clear>< / div> 
< / div> 
< / div> 
< / div> 
  

以下是CSS：

  div.wrapper {显示：块;宽度：100％;余量：0; text-align：left;} 
 div.wrapper h1，div.wrapper h2，div.wrapper h3，div.wrapper h4，div.wrapper h5，div.wrapper h6 {margin：0 0 20px 0;填充：0 0 8px 0;字体大小：的22px;字体重量：正常; font-family：Georgia，Times New Roman，Times，serif; border-bottom：1px dashed #DDDDDD;} 
 .col7，.col7 a {color：#CCCCCC; background-color：＃2E2E2E;} 
 
 #copyright {padding：20px 0;} 
 #copyright p {display：block;浮动：权利;文本对齐：权利;余量：0;填充：0; width：200px;} 
 #copyright ul {display：block;向左飘浮;余量：0;填充：0; width：700px;} 
 #copyright li {display：inline;保证金右：8像素;填充右：10px的; border-right：1px solid #CCCCCC;} 
 #copyright li.last {margin-right：0;填充右：0; border-right：none;} 
  

下面的截图显示了这个问题：

解决方案

ez和更快的答案是，用 min-height 到 #content 。这会将页脚拉到最后，并且您可以使用 min-height：50vh; - 例如 - 轻松地完成。

  #content {
 min-height：50vh; 
} 
  

该值取决于您希望页脚的大小。

Due to lack of content, my footer has been so big. I was trying to limit the size by adding height:10% to the CSS, but it doesnt work. How can I limit it .e.g. to 10% of the screen? (I want it to be responsive).

Following is HTML:

<div class="wrapper col7">
  <div id="copyright">

  <div class="list-group" style="float:left">


  <a class="list-group-item" href="" target="_blank"><i class="fa fa-linkedin-square fa-5x fa-cog-li"></i></a>


</div>  
   <br/> <p>Desgined by </p>
    <div class="clear"></div>
  </div>
</div>
</div>

Following is CSS:

div.wrapper{display:block; width:100%; margin:0; text-align:left;}
div.wrapper h1, div.wrapper h2, div.wrapper h3, div.wrapper h4, div.wrapper h5, div.wrapper h6{margin:0 0 20px 0; padding:0 0 8px 0; font-size:22px; font-weight:normal; font-family:Georgia, "Times New Roman", Times, serif; border-bottom:1px dashed #DDDDDD;}
.col7, .col7 a{color:#CCCCCC; background-color:#2E2E2E;}

#copyright{padding:20px 0;}
#copyright p{display:block; float:right; text-align:right; margin:0; padding:0; width:200px;}
#copyright ul{display:block; float:left; margin:0; padding:0; width:700px;}
#copyright li{display:inline; margin-right:8px; padding-right:10px; border-   right:1px solid #CCCCCC;}
#copyright li.last{margin-right:0; padding-right:0; border-right:none;}

And below screenshot shows the problem:

解决方案

The ez and faster answer is, add a rule with min-height to #content. This will pull your footer to the end, and you can do it easily with the min-height: 50vh; -for example-.

#content{
    min-height: 50vh;
}

The value depend of the size that you want for the footer.

这篇关于为什么这个页脚如此之大？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！