如何定位底部页脚？

正如你可以看到页脚位于顶部，我想下，我把画面更清楚地了解他们想要做的

什么

代码HTML：

<footer class="content-info" role="contentinfo"> 
    <div class="container-fluid no-padding"> 
    <div class="row"> 

     <div class="col-md-4 col-address"> 
     <div class="contact"> 
      <div class="title-footer"> 
      <p class="title-footer">CONTACT</p> 
      </div> 
     <div class="content-footer"> 
      <ul> 
      <li> 
       <div class="img-footer"> 
       <img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/address-footer.png"> 
       </div> 
       <div class="details-footer"> 
       <span>Rue de Marche 3, 1204 Geneva</span> 
       </div> 
      </li> 
      <li> 
       <div class="img-footer"> 
       <img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/email-footer.png"> 
       </div> 
       <div class="details-footer"> 
       <span>[email protected]</span> 
       </div> 
      </li> 
      <li> 
       <div class="img-footer"> 
       <img class="phone-footer" src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/telephone-footer.png"> 
       </div> 
       <div class="details-footer"> 
       <span>+41 79 132 80 85</span> 
       </div> 
      </li> 
      </ul> 
     </div> 
     </div> 
     </div> 
     <div class="col-md-4 col-center "> 
     <div class="title-footer"> 
      <p class="title-footer">FOLLOW US</p> 
     </div> 
     <div class="content-footer"> 
      <ul class="follow"> 
      <li> 
       <div class="img-footer"> 
       <img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/facebook-footer.png"> 
       </div> 
      </li> 
      <li> 
       <div class="img-footer"> 
       <img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/twitter-footer.png"> 
       </div> 
      </li> 
      <li> 
       <div class="img-footer"> 
       <img class="phone-footer" src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/instagram-footer.png"> 
       </div> 
      </li> 
      </ul> 
     </div> 
     <div class="copyright"> 
      <p>Copyright © 2016 - 2016 Bagel House Cafe</p> 
      <p>All rights reserved</p> 
     </div> 
     </div> 
     <div class="col-md-4 newsletter"> 
     <div class="title-footer"> 
      <p class="title-footer">NEWSLETTER</p> 
     </div> 
     <div class="news-input"> 
      <script language="javascript" type="text/javascript" src="http://dg-design.ch/bagel/wp-content/plugins/email-newsletter/widget/widget.js"></script> 
<link rel="stylesheet" media="screen" type="text/css" href="http://dg-design.ch/bagel/wp-content/plugins/email-newsletter/widget/widget.css"> 
<div> 
    <div class="eemail_caption"> 
    Sign up for our email newsletters </div> 
    <div class="eemail_msg"> 
    <span id="eemail_msg"></span> 
    </div> 
    <div class="eemail_textbox"> 
    <input class="eemail_textbox_class" name="eemail_txt_email" id="eemail_txt_email" onkeypress="if(event.keyCode==13) eemail_submit_ajax('http://dg-design.ch/bagel/wp-admin/admin-ajax.php')" onblur="if(this.value=='') this.value='Enter email';" onfocus="if(this.value=='Enter email') this.value='';" value="Enter email" maxlength="150" type="text"> 
    </div> 
    <div class="eemail_button"> 
    <input class="eemail_textbox_button" name="eemail_txt_Button" id="eemail_txt_Button" onclick="return eemail_submit_ajax('http://dg-design.ch/bagel/wp-admin/admin-ajax.php')" value="Submit" type="button"> 
    </div> 
</div>   <p class="copyright dg">Website by DGdesign</p> 
     </div> 
     </div> 
    </div> 
    </div> 
</footer>

你能告诉我这是为什么它是如此之高pozitioneaa？我可以安排它在CSS？

在此先感谢！

来源

2016-02-13 Marius

这里是引导http://getbootstrap.com/examples/sticky-footer-navbar/ – anton

您有容器液体类主要的div为例页脚拥有的只是1px的 – kanudo

position:absolute对你的.wrapper .content造成1px的高度，这是造成所有的大惊小怪。只需将其替换为position: static或position: relative即可。它解决了这个问题。

.wrapper .content { 
    position: absolute;// this on line number 6739 of your css 
    margin:0; 
    color: #fff; 
    width: 100%; 
}

来源

2016-02-13 09:34:35 kanudo

@Marius你也可以简单地删除位置：绝对;从'.wrapper。内容'，它解决了这个问题 – kanudo

如果你想让它固定在适当位置

footer { 
    background: #7a1418; 
    position: fixed; 
    bottom: 0; 
}

但它似乎有更多对那里

来源

2016-02-13 09:19:31

-1

请与ID页脚DIV和不是添加页脚DIV。

链接你的CSS和CSS补充一点：

footer { 
    bottom: 0; 
    position: fixed; 
}

，你也必须在中间添加一些内容，所以你会看到diffrence

来源

2016-02-13 09:22:49

高度，我不为什么已了解前我被拒绝了。代码和解释是正确的 –

我认为，因为您已将“position：fixed”添加到页脚，因为它会将页脚固定到页面底部，并且还会在页面底部覆盖页脚。而且，用户将始终看到屏幕上的页脚，尽管滚动。只需改进你的答案，你也可以得到赞扬。 – kanudo

，如果你想让它在屏幕的botoom sitck所有的时间，你必须使用

position: fixed; 
bottom: 0;

，但如果你想利用这个月底你的页脚：

<body> 

<div class='wrap'> 
site content 
</div> 

<footer> 
your footer 
</footer> 

</body>

和CSS是：

.wrap{width:100%;min-height: 100%;height: auto !important;height: 100%;margin: 0 auto 10%;} 

footer{bottom:0px;display:block;width:100%;height:auto;}

在余量：0汽车10％;你可以改变10％来设置你的页脚的高度

来源

2016-02-13 09:32:38 mohade

如何定位底部页脚？

回答

相关问题