Question

我有这个网站：

正如你所看到的，页脚位于顶部，我想要底部，我更清楚地了解了他们想要做什么

代码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>

你能告诉我为什么这么高的pozitioneaa？我可以在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%;
}

Answer 2

如果你想将它固定在位置

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

但似乎还有更多的事情发生在那里

Answer 3

如果你想让它一直在屏幕的botoom中，你必须使用

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％来设置页脚的高度

Answer 4

使用ID页脚制作DIV 而不是添加页脚到DIV。

链接您的CSS并在css中添加：

footer {
    bottom: 0;
    position: fixed;
}

而且你必须在中间添加一些内容，这样你就会看到差异

如何定位底部页脚？

4 个答案: