Question

我的页脚有问题。我试图强迫它到底，但它总是看起来很难看。

以下是代码：

<div id="footer">
<div class="container">
    <div class="row">
        <h3 class="footertext">About Us:</h3>
        <br>
          <div class="col-md-4">
            <center>
              <img src="http://oi60.tinypic.com/w8lycl.jpg" class="img-circle" alt="the-brains">
              <br>
              <h4 class="footertext">Programmer</h4>
              <p class="footertext">You can thank all the crazy programming here to this guy.<br>
            </center>
          </div>
          <div class="col-md-4">
            <center>
              <img src="http://oi60.tinypic.com/2z7enpc.jpg" class="img-circle" alt="...">
              <br>
              <h4 class="footertext">Artist</h4>
              <p class="footertext">All the images here are hand drawn by this man.<br>
            </center>
          </div>
          <div class="col-md-4">
            <center>
              <img src="http://oi61.tinypic.com/307n6ux.jpg" class="img-circle" alt="...">
              <br>
              <h4 class="footertext">Designer</h4>
              <p class="footertext">This pretty site and the copy it holds are all thanks to this guy.<br>
            </center>
          </div>
        </div>
        <div class="row">

    </div>
</div>

我尝试使用

<div class="footer navbar-fixed-bottom">

但在这种情况下，位于页脚上方的文本会被页脚重叠

这是我用的css：

    #footer {
padding-top: 100px
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Sets the fixed height of the footer here */
  height: 280px;
  background: 
  /* color overlay */ 
    linear-gradient(
      rgba(240, 212, 0, 0.45), 
      rgba(0, 0, 0, 0.45)
    ),
    /* image to overlay */
    url(222.png);
}
.footertext {
  color: #ffffff;
}

Here is what I mean by ugly. I did try to set html and body height as 100% in css

Answer 1

请向我们展示“看起来很难看”的含义，以便我们为您提供帮助，因为我们无法真正了解您的问题。

我说问题可能属于#footer div的父级。

Answer 2

我认为您只需要将position: absolute;更改为position: relative;或position: fixed;，以使div保持在最底层（取决于您的预期行为）。

附注，请勿使用标记<center>，因为它现已弃用，请改用CSS（text-align: center）。

Answer 3

填充顶部后缺少一个分号：100px。您也可以尝试position：fixed而不是position：absolute。位置的元素：固定;相对于视口定位，这意味着即使页面滚动，它也始终保持在同一位置。

Answer 4

其<div class="footer navbar fixed-bottom">

不是<div class="footer navbar-fixed-bottom">

您错误输入了-

如何使页脚粘到底部

4 个答案: