Как удалить пространство ниже липкого нижнего колонтитула в HTML5?

Question

Я работаю на отзывчивый сайт и используя twitter bootstrap. Я не могу установить нижний колонтитул на своем сайте. Googled многие сайты нашли решение, но оно не применяется на моей странице. Не удалось проследить проблему. пожалуйста, проверьте code here jsdiddle.. Я не хочу места ниже нижнего колонтитула. Спасибо.

//css 
html, body { 
    height: 100%; 
      margin: 0pt; 
} 

#wrap { 
    min-height: 100%; 
    height: auto; 
    margin: 0 auto -60px; 
    padding: 0 0 60px; 
} 


#footer { 
    height: 60px; 
    background-color: #f5f5f5; 
} 

Answer 1

Может быть, это может решить вашу проблему:

#wrap { 
    min-height: 100%; 
    height: auto; 
    margin: 0 auto; 
    padding: 0; 
} 

Answer 2

Ну что пространство там, потому что у вас есть -60px маржа

margin: 0 auto -60px;

Answer 3

Это то, что вы ищете: http://ryanfait.com/html5-sticky-footer/

Answer 4

Ваш HTML структурирован неправильно.

Колонтитул DIV должен быть вне обертке

HTML

<div id="wrap"> 

    <div class="container-fluid" style="padding-top:1%; padding-bottom: 1%;"> 
     <div class="row-fluid"> 
      <div class="span12 largecircle"> 

      </div>  
     </div> 
    </div> 


</div> 

<div id="footer">  
    <div class="container-fluid" style=" background-color:#cccccc; position: absolute; opacity:0.7;"> 
     <div class="row-fluid"> 
      <h1>Sticky </h1> 
     </div> 
     <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>  
     <p>Use if need be, too.</p> 
    </div> 
</div> 

JSFiddle Demo