html - 如何定位底部页脚？

Question

我有这个网站:

link

如您所见，页脚位于顶部，而我想要底部，我放个图更清楚明白他们要干什么

代码 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>info@bagelhousecafe.ch</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>

你能告诉我为什么它的位置这么高吗？我可以用 CSS 安排它吗？

提前致谢!

Answer 1

position:absolute 导致您的 .wrapper .content 的高度为 1 px，这造成了所有的麻烦。只需将其替换为 position: static 或 position: relative。它解决了这个问题。

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