Why this footer is so big?

问题

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:

回答1:

You don't have separate footer, its your page size, You are assigning default height which will set to your screen. So, gray color is your body and black color is your content, when there is less amount of content , it shows a bigger footer. Better you set fixed size for content, so if content is less also, the footer size will be same because you have fixed size..

You can do something like this..

.col5{color:#CCCCCC; background-color:#000000; border-bottom:1px solid #3B3B3B; height:360px;}

In your code, col5 is your wrapper content, so i have set its size to 360px which is a 90% of the size, you can change pixel according to your page size.Which looks like you have set footer to 10%.

Check this fiddle https://jsfiddle.net/hdoy98ag/1/

回答2:

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.

来源：https://stackoverflow.com/questions/32509515/why-this-footer-is-so-big

标签

html

css

footer