让页脚位于所有内容的底部

Question

我找到了堆栈溢出的解决方案（这就是解决方案）：

footer
{
position:fixed; 
bottom:0;
width:100%; 
height:auto;
margin-top: 30px;
background-color: green;
}

问题是：它确实将内容保留在页面底部，问题是它位于内容的后面。我想说的问题是：我希望页脚保留在页面底部，如果添加了更多内容，我希望页脚内容保留在页面底部，我在解决这个问题时遇到了问题.我确实尝试将底部值设置为 1 和 -1，但是滚动条不明显，所以这不是解决整个问题的方法。

html、主体和包装器 CSS 我从此处的 YouTube 视频中获得：Footer Stick to Bottom video that didn't properly work 非常感谢！

html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: black;
}

#wrapper {
  min-height: 100%;
  position: relative;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: auto;
  margin-top: 30px;
  background-color: green;
}

#homepage {
  background-image: url(images/home_image.jpeg);
  background-size: cover;
}


/* MEDIA QUERIES */


/* Smaller/Older Smartphones */

@media screen and (max-width: 360px) {}


/* Regular Smartphones */

@media screen and (min-width: 360px) and (max-width: 480px) {}


/*#################################
###################################
###################################
#################################*/


/* BIGGER PHONES */

@media screen and (min-width: 480px) and (max-width: 768px) {}


/*#################################
###################################
###################################
#################################*/


/* Regular Tablets */

@media screen and (min-width: 768px) and (max-width: 1024px) {}


}

/*#################################
###################################
###################################
#################################*/

/* Large Tablets/Small Computers */
@media screen and (min-width: 1024px) and (max-width: 1366px) {}

/*#################################
###################################
###################################
#################################*/

/* Large Tablets/Small Computers */
@media screen and (min-width: 1366px) {
  /* HOMEPAGE */
  
  .footer-contain h1 {
    margin: 20px 25% 0px;
    color: black;
    text-align: center;
    font-size: 60px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<!-- START OF HEAD -->

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Nerdo Development Homepage</title>
  <!-- CSS STYLES -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="specificdevicestyles.css">
</head>
<!-- END OF HEAD -->
<!-- START OF BODY -->

<body id="homepage">
  <div id="wrapper">
    <!-- NAVIGATION BAR -->
    <section id="navigation">
      <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <a class="navbar-brand" href="index.html">Nerdo Development</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navB" aria-controls="navB" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                  </button>

        <div class="collapse navbar-collapse" id="navB">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="about.html">About Us</a>
            </li>
            <div class="dropdown show">
              <a class="btn nav-link dropdown-toggle text-left" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Examples
                          </a>

              <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                <a class="dropdown-item" href="webdesignexamples.html">Web Designs</a>
                <a class="dropdown-item" href="businesscardsexamples.html">Business Cards</a>
                <a class="dropdown-item" href="clients.html">Clients We Have Worked With</a>
              </div>
            </div>
            <li class="nav-item">
              <a class="nav-link" href="services.html">Services</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="pricing.html">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="contact.html">Contact Us</a>
            </li>
          </ul>
        </div>
      </nav>
    </section>
    <!-- END OF NAVIGATION BAR -->
    <!-- START OF HOMEPAGE -->
    <section>
      <div class="container footer-contain">
        <div class="row text-center">
          <div class="col-md">
            <h1 class="homepageQuote">We <strong>specialize</strong> in creating <strong>appealing</strong> websites for <strong>small</strong> businesses across the world for an <strong>inexpensive cost</strong></h1>
          </div>
        </div>
        <br>
        <div class="row text-center button-special">
          <div class="col-md">
            <button type="button" class="btn btn-lg"><a href="about.html">About our Team</a></button>
          </div>
          <div class="col-md button-margin">
            <button type="button" class="btn btn-lg"><a href="services.html">Our Services</a></button>
          </div>
        </div>
      </div>
    </section>
    <!-- END OF HOMEPAGE -->
    <!-- START OF FOOTER -->
    <footer class="footer text-center">
      <div class="container footer-main-alpha">
        <div class="row footer-settings">
          <div class="col-md">
            <h5>Our Mission To You</h5>
            <h5>Our objective is to create the software or website you want. We give our 100% effort into completing and satisying your needs and wants.</h5>
          </div>
          <div class="col-md">
            <blockquote class="blockquote">
              <h4>"Design is not just what it looks like and feels like. Design is how it works."<span class="blockquote-footer">Steve Jobs</span></h4>
            </blockquote>
          </div>
          <div class="col-md">
            <h1>Navigate Around</h1>
            <h6><a href="index.html">Home</a> | <a href="about.html">About Us</a></h6>
            <h6><a href="webdesignexamples.html">Examples</a> | <a href="services.html">Our Services</a></h6>
            <h6><a href="pricing.html">Our Pricing</a> | <a href="contact.html">Contact Us</a></h6>
          </div>
        </div>
      </div>
      <!-- SOCIAL MEDIA -->
      <div class="container footer-social">
        <div class="row footer-settings">
          <div class="col-md following">
            <h5><span>Follow us on Social Media!</span></h5>
            <ul class="list-inline">
              <li class="list-inline-item">
                <a href="https://twitter.com/NerdoDevelopme1" target="_blank"><img src="images/icon_twitter.png"></a>
              </li>
              <li class="list-inline-item">
                <a href="https://www.facebook.com/nerdodevelopment/" target="_blank"><img src="images/icon_facebook.png"></a>
              </li>
              <li class="list-inline-item">
                <a href="https://www.instagram.com/nerdodevelopment/?hl=en" target="_blank"><img src="images/icon_instagram.png"></a>
              </li>
              <li class="list-inline-item">
                <a href="https://www.linkedin.com/in/nerdo-development-2533b1166/" target="_blank"><img src="images/icon_linkedin.png"></a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="container footer-copyright footer-settings">
        <h6>Nerdo Development Copyright &copy; 2018; All Rights Reserved</h6>
      </div>
    </footer>
    <!-- END OF FOOTER -->
  </div>



</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</html>

Answer 1

CSS定位：

您有：

 position: fixed;

在你的 CSS.

在shorthand中，意思是元素相对定位，固定在页面的屏幕视图，所以元素永远不会脱离页面的视口 window。对于比屏幕长的页面，这将是一个最明显的问题，因为该元素永远不会滚动。

您实际需要的是 position:absolute; 元素相对于其父元素 以固定方式定位 .

如 the MDN Manual 所述：

Absolute:

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

This value creates a new stacking context when the value of z-index is not auto. The margins of absolutely positioned boxes do not collapse with other margins.

因此，您将需要为 absolutely 定位的元素设置一个有效的 z-index 值，以确保它位于页面上其他内容的上方而不是下方。

最后；

我个人也有一种偷偷摸摸的感觉，绝对定位元素（你的页脚）的父元素也应该设置为非静态relatively定位。

因此我想你的页脚 css 应该是这样的：

footer {
  position: absolute;
  z-index: 1000  /* Always on top */
  bottom: 0;
  width: 100%;
  height: auto;
  margin-top: 30px;
  background-color: green;
}

Answer 2

您的页脚元素可能最好使用 position: fixed。绝对定位仅将元素放置在最接近其定位祖先的精确位置。

作为一个工作示例，此页面的顶部栏设置为固定定位，如管理它的 CSS 所示：

.top-bar._fixed {
  position: fixed;
  min-width: auto;
  box-shadow: 0 1px 0 rgba(12,13,14,0.1),0 1px 6px rgba(59,64,69,0.1);
}

关于 CSS 定位的更多参考资料，W3 Schools 涵盖了它 here。此外，正如 Martin 在上面发布的那样，您需要进行测试以确保将 z-index 设置为可接受的值。如果页面上有其他元素使用它（例如响应式导航），请确保没有冲突。

希望对您有所帮助。

让页脚位于所有内容的底部

Have footer stay at bottom of all content

html

css

footer

CSS定位：

最后；